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


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 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 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
Terran兵种对照表
2020/03/14 星际争霸
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
详解Nodejs之npm&package.json
2017/06/15 NodeJs
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
django框架如何集成celery进行开发
2017/05/24 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
关于Python-faker的函数效果一览
2019/11/28 Python
500行python代码实现飞机大战
2020/04/24 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
网络信息管理员岗位职责
2014/01/05 职场文书
五年级科学教学反思
2014/02/05 职场文书
接待员岗位责任制
2014/02/10 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
升职自荐信怎么写
2015/03/05 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
复兴之路观后感
2015/06/02 职场文书
关于军训的感想
2015/08/07 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书