微信小程序开发11-点击事件

本文来源于腾讯云官方小程序培训营

事件是视图层到逻辑层的通信方式,当我们点击tap触摸touch长按longpress小程序绑定了事件的组件时,就会触发事件,执行逻辑层中对应的事件处理函数。

小程序框架的视图层由 WXML 与 WXSS 来编写的,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

页面滚动

使用开发者工具新建一个tapevent的页面(直接在app.json的pages配置项第一行添加一个tapevent的页面,由于是第一项,这样就可以成为小程序的首页呈现出来),然后将以下代码输入到tapevent.wxml文件里:

<button type="primary" bindtap="scrollToPosition">滚动到页面指定位置</button>
<view class="pagetop" style="background-color:#333;width:100%;height:400px"></view>
<button type="primary" bindtap="scrollToTop">滚动到页面顶部(返回顶部)</button>
<view id="pageblock" style="background-color:#333;width:100%;height:400px"></view>

这里的 type="primary"只是引入weui给button添加的样式。而函数名scrollToPosition和scrollToTop是可以自己定义的,然后我们再来在相应的js文件里要添加和函数名scrollToPosition和scrollToTop对应的事件处理函数。

在tapevent.js的Page({})里(也就是和 data:{}onLoad: function (options) { }等函数平级),输入以下代码:

  scrollToTop() {
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  },
 
  scrollToPosition() {
    wx.pageScrollTo({
      scrollTop: 6000,
      duration: 300
    })
  },

当用户点击该button组件的时候会在该页面对应的Page中找到相应的事件处理函数。保存编译之后,看看是不是就有了页面滚动的效果了?原理是scrollToTop()和scrollToPosition()这两个函数实际上都是调用了同一个小程序的滚动API wx.pageScrollTo(),关于该API的具体参数信息,我们可以查阅技术文档。

滚动API技术文档:wx.pageScrollTo(Object object)

在官方文档我们可以看到wx.pageScrollTo()的作用是将页面滚动到目标位置,支持选择器和滚动距离两种方式定位

  • scrollTop滚动到页面的目标位置,单位 px,值为0就是滚动到顶部;值为600就是
  • duration是滚动动画的时长,单位为ms,而1秒=1000毫秒

那如何滚动到指定的选择器的位置呢?前面我们已经给view分别添加了id和class的选择器,只需要将之前的函数的配置信息修改为如下(注意哦,如果你是添加而不是修改,函数名会冲突的,或者你可以起其他的函数名):

  scrollToTop() {
    wx.pageScrollTo({
      duration: 3000,
      selector:".pagetop"
    })
  },
 
  scrollToPosition() {
    wx.pageScrollTo({
      duration: 300,
      selector:"#pageblock"
    })
  },
小任务:如果只是在组件上绑定了事件也就是只有 bindtap="scrollToPosition",但是并没有在js文件里写相应的事件处理函数scrollToPosition,看一下控制台Console会报什么错?

不要误以为只有button组件才可以绑定事件哦,还记得我们小程序组件里看的技术文档小程序组件吗?在公共属性部分,可以看到所有组件都有以下属性bind / catch,这个属性的类型是EventHandler,bindtap就是bind*的一个类型。也就是说小程序的所有组件都可以通过以上方法触发事件处理函数,达到滚动等效果。使用button为案例只是为了便于展示而已。

命名规范:JavaScript的项目名、函数名、变量等都应该遵循简洁、语义化的原则。函数名推荐使用驼峰法来命名(camelCase),比如scrollToTop、pageScrollTo,也就是由小写字母开始,后续每个单词首字母都大写,长得跟骆驼

标签: none

添加新评论