微信小程序实现列表页的点赞和取消点赞功能


Posted in Javascript onNovember 02, 2018

今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下:

/*更新点赞*/ 
 update_zan:function(e){ 
  var that = this; 
  var data = e.currentTarget.dataset; 
  var mid = data.mid; 
  var cookie_mid = wx.getStorageSync('zan') || [];//获取全部点赞的mid 
  var isadd = 1; 
  var newmessage = []; 
  if (cookie_mid.includes(mid)){//说明已经点过赞,取消赞 
   isadd = 0; 
   var m = 0; 
   for (var j in cookie_mid){ 
    if(cookie_mid[j] != mid){ 
     newmessage[m] = cookie_mid[j]; 
     m++ 
    } 
   } 
   wx.setStorageSync('zan', newmessage);//删除取消赞的mid 
  }else{ 
   cookie_mid.unshift(mid); 
   wx.setStorageSync('zan', cookie_mid);//新增赞的mid 
  } 
  wx.request({ 
   url: app.globalData.api.api_system, 
   data: { 
    action: 'zannum', 
    mid: mid, 
    isadd: isadd, 
    wxid: app.globalData.wxid 
   }, 
   method: 'GET', 
   // header: {},  
   success: function (res) { 
    var message = that.data.message; 
    for (var i in message) { 
     if(message[i].mid == mid){ 
      if(isadd){ 
       message[i].zan = parseInt(message[i].zan) + 1 
      }else{ 
       message[i].zan = parseInt(message[i].zan) - 1 
      } 
       
     } 
    } 
    that.setData({ 
     message: message 
    }) 
   } 
  })

重点注意代码:

(1)要把所有已经点过赞的留言id给存储到本地缓存之中,这样如果重复点赞的,就可以判断出来,并取消点赞,取消点赞的同时要去掉缓存中的id;
(2)新增点赞和取消点赞用到同一个api,通过isadd=1或者isadd=0来判断是新增还是取消点赞
(3)为了不频繁去读取留言列表,可以直接调用this.data.message,并通过循环遍历改变某个留言的点赞数,然后直接重新赋值,就能动态改变点赞数!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
VUE实现日历组件功能
Mar 13 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 #Javascript
element ui table 增加筛选的方法示例
Nov 02 #Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 #Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 #Javascript
如何使用vuex实现兄弟组件通信
Nov 02 #Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 #Javascript
vue头部导航动态点击处理方法
Nov 02 #Javascript
You might like
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php牛逼的面试题分享
2013/01/18 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
自己使用总结Python程序代码片段
2015/06/02 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
详谈python http长连接客户端
2017/06/12 Python
详解Python中的动态属性和特性
2018/04/07 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
高中生的自我评价
2014/03/04 职场文书
企业党建工作总结2015
2015/05/26 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python