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


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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
javascript封装简单实现方法
Aug 11 Javascript
js获取图片宽高的方法
Nov 25 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
微信小程序如何获取地址
Dec 24 Javascript
vue 页面跳转的实现方式
Jan 12 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异步执行的详解
2013/06/03 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
jquery.validate使用时遇到的问题
2015/05/25 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
js解决movebox移动问题
2016/03/29 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Django REST 异常处理详解
2020/07/15 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
《会变的花树叶》教学反思
2014/02/10 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
英语复习计划
2015/01/19 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
个人更名证明
2015/06/23 职场文书
运动会5000米加油稿
2015/07/21 职场文书
2019思想汇报范文
2019/05/21 职场文书
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js