小程序数据绑定点赞效果切换（交流QQ群：604788754）

最新推荐文章于 2022-06-28 15:33:38 发布

weixin_33797791

最新推荐文章于 2022-06-28 15:33:38 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yiweiyihang/p/7054350.html

本文介绍了一个使用WXML和JS实现点赞数增减的小程序案例。通过绑定事件处理函数和数据绑定，实现了点击不同元素时点赞数的变化，并展示了如何在WXML中使用wx:for进行循环渲染。

如果对本例有更好的意见和建议，希望给予留言或是加群跟群主联系，交流学习。

WXML:

<block wx:for="{{nums}}" wx:for-index='idx' wx:for-item='item'>
  <view class="maxbox"  bindtap="imgchange" data-id="{{idx}}">
    <view class="zan">
      <image wx:if="{{ item.id == idx }}" class="zan01" src="img/zan1.png" ></image>
      <image wx:else class="zan01" src="img/zan2.png"></image>
    </view>
    <text class="nums">{{item.num}}</text>
  </view>
</block>

JS:

Page({
  data: {
    nums: [
      { id: 0, num: 11 },
      { id: 1, num: 22 }
    ]
  },
  imgchange: function (event) {
    //获取当前item的下标id  通过currentTarget.id
    //data-id
    var dataid = event.currentTarget.dataset.id;
    var nums = this.data.nums[dataid].num;
   //数据里面的id;
    var ids = this.data.nums[dataid].id; 
    if ( dataid == ids ){
      nums++;
      this.data.nums[dataid].num = nums;
      this.data.nums[dataid].id = ids + 1; 
      this.setData({
        nums: this.data.nums
      });
    }else{
      nums--; 
      this.data.nums[dataid].id = ids - 1; 
      this.data.nums[dataid].num = nums;
      this.setData({
        nums: this.data.nums
      });
    }
  },
})

效果如下：