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


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的三级展开列表
Apr 26 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
手把手带你搭建一个node cli的方法示例
Aug 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解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
使用正则替换变量
2007/05/05 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
python的常见矩阵运算(小结)
2019/08/07 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python实现logistic分类算法代码
2020/02/28 Python
python3中布局背景颜色代码分析
2020/12/01 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
教育学专业毕业生的自我评价
2013/11/21 职场文书
酒店公关部经理岗位职责
2013/11/24 职场文书
七年级生物教学反思
2014/01/30 职场文书
会计系毕业生求职信
2014/05/28 职场文书
失职检讨书大全
2015/01/26 职场文书
英语辞职信怎么写
2015/02/28 职场文书
运动会宣传语
2015/07/13 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
python程序的组织结构详解
2021/12/06 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS