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


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下function声明一些小结
Dec 28 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
vue生命周期的探索
Apr 03 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
微信小程序实现倒计时功能
Nov 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
dedecms模版制作使用方法
2007/04/03 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
vue引用外部JS的两种种方法
2020/01/28 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
PyQt5 多窗口连接实例
2019/06/19 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python 如何查找特定类型文件
2020/08/17 Python
高中生学习生活的自我评价
2013/11/27 职场文书
仓库组长岗位职责
2014/01/29 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
如何写求职信
2014/05/24 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers