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


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 相关文章推荐
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 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
php调用mysql存储过程
2007/02/14 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
jquery插件制作简单示例说明
2012/02/03 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
销售员自我评价怎么写
2013/09/19 职场文书
信用社实习人员自我鉴定
2013/09/20 职场文书
专升本自我鉴定
2013/10/10 职场文书
银行门卫岗位职责
2013/12/29 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
工会经费申请报告
2015/05/15 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
详解Python中下划线的5种含义
2021/07/15 Python
redis数据结构之压缩列表
2022/03/21 Redis
ant design vue的form表单取值方法
2022/06/01 Vue.js
Django框架模板用法详解
2022/06/10 Python