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


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验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
js中arguments对象的深入理解
May 14 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
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
PHP遍历二维数组的代码
2011/04/22 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python实现用户登录系统
2016/05/21 Python
Python判断两个对象相等的原理
2017/12/12 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Pytorch中.new()的作用详解
2020/02/18 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
python模块内置属性概念及实例
2021/02/18 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
自我推荐书
2013/12/04 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
高中同学会活动方案
2014/08/14 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
地道战观后感2000字
2015/06/04 职场文书
重阳节活动主持词
2015/07/04 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书