微信小程序实现点赞、取消点赞功能_微信开发者工具设置点赞功能 - CSDN文库

160 浏览量更新于2023-05-11 评论收藏 29KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要为大家详细介绍了微信小程序实现点赞、取消点赞，和多项点击功能，具有一定的参考价值，感兴趣的小

伙伴们可以参考一下

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

多说咱们直接上代码！

效果图

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

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38606811

粉丝: 6
资源: 982

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈