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


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 相关文章推荐
javascipt基础内容--需要注意的细节
Apr 10 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
vue之浏览器存储方法封装实例
Mar 15 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 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实现猴子选大王问题算法实例
2015/04/20 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP中16个高危函数整理
2019/09/19 PHP
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
Python中optparse模块使用浅析
2015/01/01 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
python跨文件使用全局变量的实现
2020/11/17 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
幼儿园消防安全制度
2014/01/26 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
合作投资意向书
2014/04/01 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
企业计划生育责任书
2015/05/09 职场文书
费用申请报告范文
2015/05/15 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
孔繁森观后感
2015/06/10 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
canvas实现贪食蛇的实践
2022/02/15 Javascript