最近接触到小程序, 发现很有意思, 在项目中遇到了一点小问题, 就是点赞 + 取消点赞有些冲突, 还有就是多项的点击, 话不多说咱们直接上代码!
效果图
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 的解构赋值, 不知道的小伙伴可以百度学习一下了, 其中的图片可以自行下载, 能看到效果就可以了.
来源: https://www.jb51.net/article/150067.htm