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


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中jqGrid分页实现代码
Nov 04 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
JS实现放大镜效果
Sep 21 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实现的MongoDB数据库操作类分享
2014/05/12 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python队列Queue的详解
2019/05/10 Python
浅析Python面向对象编程
2020/07/10 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
电子信息工程专业推荐信
2014/02/14 职场文书
出纳员的岗位职责
2014/02/22 职场文书
校庆接待方案
2014/03/18 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2014年管理工作总结
2014/11/22 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
授权委托书
2015/01/28 职场文书
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS