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


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实现自定义标签
May 08 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
vue实现文件上传功能
Aug 13 Javascript
js实现简单点赞操作
Mar 17 Javascript
vue实现div单选多选功能
Jul 16 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
详解Js模块化的作用原理和方案
Apr 29 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生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
理解python中生成器用法
2017/12/20 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
旅游个人求职信范文
2014/01/30 职场文书
社区工作感言
2014/02/21 职场文书
高级销售求职信
2014/02/21 职场文书
火灾现场处置方案
2014/05/28 职场文书
入党推优材料
2014/06/02 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
二胎满月酒致辞
2015/07/29 职场文书
二十年同学聚会感言
2015/07/30 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL