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

来源：动视网责编：小采时间：2020-11-27 22:05:33

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

微信小程序实现点赞、取消点赞功能:最近接触到小程序，发现很有意思，在项目中遇到了一点小问题，就是点赞+取消点赞有些冲突，还有就是多项的点击，话不多说咱们直接上代码！效果图 wxml <block wx:for={{msg}}> <image class='imgList' hidden='{{it

推荐度：

点击下载本文 文档为doc格式

导读微信小程序实现点赞、取消点赞功能:最近接触到小程序，发现很有意思，在项目中遇到了一点小问题，就是点赞+取消点赞有些冲突，还有就是多项的点击，话不多说咱们直接上代码！效果图 wxml <block wx:for={{msg}}> <image class='imgList' hidden='{{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;
}

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

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

推荐度：

点击下载本文 文档为doc格式

标签：点赞微信小程序功能

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐