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

这时我轻轻地闭上了眼睛,我好像来到童话世界,好像在和小鸟讨论秋天的美景,好像在和小草拍秋天的照片。农民伯伯在田野里收获了庄稼,果农们在果园里收获了果子,我们在学校里收获快乐、收获知识、收获成长。

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

效果图

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

以上就是微信小程序实现点赞、取消点赞功能。你要克服的是你的虚荣心,是你的炫耀欲,你要对付的是你的时刻想要冲出来想要出风头的小聪明。更多关于微信小程序实现点赞、取消点赞功能请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
微信小程序如何访问公众号文章

微信小程序实现类似微信点击语音播放效果

微信小程序wx.request拦截器使用详解

微信小程序在ios下Echarts图表不能滑动的问题解决

小程序中canvas的drawImage方法参数使用详解