当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现点赞、取消点赞功能

微信小程序实现点赞、取消点赞功能

2018年11月03日  | 移动技术网IT编程  | 我要评论

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

效果图

wxml

 <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的解构赋值，不知道的小伙伴可以百度学习一下了，其中的图片可以自行下载，能看到效果就可以了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网