微信小程序事件交互

详细的看注释

index.wxml

<view class="container">
  
  <view>{{clickMsg}}</view>

  <view id="view0" data-hi="wx-view0" class="view-item" bindtap="clickMe">点击view0</view>
  <view id="view1" data-hi="wx-view1" class="view-item" bindtap="clickMe">点击view1</view>

</view>

index.js

var count = 0;
var param = {
  //index.wxml页面的{{clickMsg}}标签就是放在下面这块显示
  data: {
    clickMsg: "内容显示区"
  },
  clickMe: function (e) {
    count++;
        

    //如何区分到底是view0和view1点击
    var id = e.currentTarget.id;

    //也可取得data-xxxx的值,控件wxml里面可以携带私有数据
    //index.wxml我们定义了data-hi,下面取出data-hi的值
    var datan = e.currentTarget.dataset.hi;

    param.data.clickMsg = '显示内容' + id + '被点击次数' + count + '自定义data值' + datan;     

    /* 上面虽然作了点击后修改内容,但需要使用this.setData(param.data),界面才会刷新 */
    this.setData(param.data);
  }
};

Page(param);

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND