小程序事件绑定使用

什么是事件？

• 事件是视图层到逻辑层的通讯方式。

• 事件可以将用户的行为反馈到逻辑层进行处理。

• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

• 事件对象可以携带额外信息，如 id, dataset, touches

事件的使用方法

在组件中绑定一个事件处理函数

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> 点击我 </view>

然后在相应的page定义中写上相应的事件处理函数，参数是event

Page({
  tapName: function(event) {
    console.log(event)
  }
})

在微信小程序中，点击事件是使用bindtap

事件传递参数

小程序中传递参数，把参数以属性绑定的形式绑定到目标元素上，data-属性名="值"

定义的函数形参上，event.target.dataset来获取绑定的属性参数即可

如果我们要传递的参数比较大的情况下，我们可以使用小程序的本地存储来获取数据，setStorageSync

<view>
  {{msg}} -- {{num}}
  <button type="primary" data-name="小明" data-age="40" id="10" bindtap="plus">点击事件</button>
</view>

获取数据

plus(event){
    console.log("点击事件的调用",event.target.dataset);
    this.setData({
      num:this.data.num+Number(event.target.id),
    })
},

除此以外，我们还有一些其他的内置事件

• onPageScrollTo页面滚动事件

• onShareAppMessage分享事件

我们可以设置一个到顶部事件，只需要设置scrolltop为0即可，使用duration设置动画时间

 toTop(){
    wx.pageScrollTo({
      scrollTop:0,
      duration:1000,
    })
  },