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


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学习笔记8 用JSON做原型
Jan 11 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 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个人网站架设连环讲(二)
2006/10/09 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
joomla数据库操作示例代码
2016/01/06 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
JS 建立对象的方法
2007/04/21 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
财务人员求职自荐书范文
2014/02/10 职场文书
安全月活动总结
2014/05/05 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
计算机教师工作总结
2015/08/13 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python