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


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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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面向对象详解(三)
2015/12/07 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
基于python的多进程共享变量正确打开方式
2018/04/28 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
django如何实现视图重定向
2019/07/24 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
python 等差数列末项计算方式
2020/05/03 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
求职推荐信
2013/10/28 职场文书
团员个人的自我评价
2013/12/02 职场文书
支教自我鉴定
2014/01/18 职场文书
踏青活动策划方案
2014/08/19 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
《确定位置》教学反思
2016/02/18 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python