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


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 10 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
AngularJs表单验证实例详解
May 30 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 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在Web开发领域的优势
2006/10/09 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
php中strtotime函数用法详解
2014/11/15 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
javascript事件模型介绍
2016/05/31 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
怎样声明一个匿名的内部类
2016/06/01 面试题
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
小学英语教学反思
2014/01/30 职场文书
消防安全员岗位职责
2014/03/10 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
学生评语集锦
2015/01/04 职场文书
给老师的一封感谢信
2015/01/20 职场文书
社区低保工作总结2015
2015/07/23 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
浅谈Python数学建模之固定费用问题
2021/06/23 Python