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


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 相关文章推荐
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
vue自动化表单实例分析
May 06 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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之第八天
2006/10/09 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
numpy.random模块用法总结
2019/05/27 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
考察邀请函范文
2015/01/31 职场文书
故宫英文导游词
2015/01/31 职场文书
英文版辞职信
2015/02/28 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
毕业生政审意见范文
2015/06/04 职场文书
社区安全温馨提示语
2015/07/14 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers