最近接触到小程序,发现很有意思,在项目中遇到了一点小问题,就是点赞+取消点赞有些冲突,还有就是多项的点击,话不多说咱们直接上代码!

效果图

\"\"

w

 <block wx:for=\"{{msg}}\">
 <image class=\'imgList\' hidden=\'{{item.show}}\' bindtap=\'zan\' data-index=\'{{index}}\' src=\'../resizeApi.png\'></image>
      <image class=\'imgList\' hidden=\'{{!item.show}}\' bindtap=\'zan\' data-index=\'{{index}}\' src=\'../resizeApi (1).png\'></image>
      <text> {{item.show}}</text>
 </block>

wxss

.imgList{
 height: 150rpx;
 width: 150rpx;
}

js

Page({

 data: {
  msg: [
   { \'show\': true },
   { \'show\': false },
   { \'show\': false },
   { \'show\': false },
   { \'show\': false },
   { \'show\': false },
   { \'show\': false },
   { \'show\': false },
  ]
 },
 zan: function (e) {
  const vm = this;

  const _index = e.currentTarget.dataset.index;

  let _msg = [...vm.data.msg]; // msg的引用

  _msg[_index][\'show\'] = !vm.data.msg[_index][\'show\'];


  vm.setData({
   msg: _msg

  })

 }
});

代码中用到了es6的解构赋值,不知道的小伙伴可以百度学习一下了,其中的图片可以自行下载,能看到效果就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

收藏 打印