一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2018-11-08 编辑:猪哥 来源:一聚教程网

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

效果图

wxml

 
 
      
       {{item.show}}
 

wxss

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

热门栏目