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


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动画流畅的一些方法
Jun 30 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
webpack入门必知必会
Jan 16 Javascript
layui选项卡效果实现代码
May 19 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
vue实现点击按钮下载文件功能
Oct 11 Javascript
基于Vue实现微前端的示例代码
Apr 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
下载文件的点击数回填
2006/10/09 PHP
实用函数7
2007/11/08 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python解析json文件相关知识学习
2016/03/01 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python中退出多层循环的方法
2018/11/27 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
python实现计算图形面积
2021/02/22 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
高中数学教师求职信
2013/10/30 职场文书
护士自我评价范文
2014/01/25 职场文书
高中打架检讨书
2014/02/13 职场文书
全国文明单位申报材料
2014/05/31 职场文书
认错检讨书
2014/10/02 职场文书
2014年团队工作总结
2014/11/24 职场文书
搬迁通知
2015/04/20 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server