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


Posted in Javascript onNovember 02, 2018

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

效果图

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

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

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

Javascript 相关文章推荐
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
微信小程序 navbar实例详解
May 11 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 #Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 #Javascript
小程序实现列表点赞功能
Nov 02 #Javascript
Vue中的vue-resource示例详解
Nov 02 #Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 #Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 #Javascript
element ui table 增加筛选的方法示例
Nov 02 #Javascript
You might like
php4的彩蛋
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
javascript轮播图算法
2016/10/21 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
JS实现随机点名器
2020/04/12 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python实现AES加密与解密
2019/03/28 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
教育技术职业规划范文
2014/03/04 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
旷课检讨书500字
2014/10/14 职场文书
初中家长评语大全
2014/12/26 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js