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


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 相关文章推荐
网页图片延时加载的js代码
Apr 22 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
Javascript webpack动态import
Apr 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 删除记录实现代码
2009/03/12 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
使用URL传输SESSION信息
2015/07/14 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
php的扩展写法总结
2019/05/14 PHP
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
sklearn的predict_proba使用说明
2020/06/28 Python
python为什么要安装到c盘
2020/07/20 Python
Python调用JavaScript代码的方法
2020/10/27 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
学雷锋宣传标语
2014/06/25 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
优秀教师个人材料
2014/12/15 职场文书
2016新年问候语大全
2015/11/11 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
python实现局部图像放大
2021/11/17 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android