为何选择亿云小程序_微信小程序完成点赞、撤销

微信小程序实现点赞、取消点赞功能       这篇文章主要为大家详细介绍了微信小程序实现点赞、取消点赞,和多项点击功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果图

wxml

 block wx:for="{{msg}}" 
 image hidden='{{item.show}}' bindtap='zan' data-index='{{index}}' src='../resizeApi.png' /image 
 image 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'];

代码中用到了es6的解构赋值,不知道的小伙伴可以百度学习一下了,其中的图片可以自行下载,能看到效果就可以了。

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


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://mfjwzr.com/ziyuan/3059.html