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


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 关闭IE6、IE7
Jun 01 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
jQuery返回定位插件详解
May 15 jQuery
JavaScript实现时间表动态效果
Jul 15 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 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
数字转英文
2006/12/06 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
python如何停止递归
2020/09/09 Python
Java的五个基础面试题
2016/02/26 面试题
深圳-东方伟业笔试部分
2015/02/11 面试题
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
乡镇交通安全实施方案
2014/03/29 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
医院员工辞职信范文
2015/05/12 职场文书