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


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 简单导航实现代码
Sep 11 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
js制作简易年历完整实例
Jan 28 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
Vue实现图片轮播组件思路及实例解析
May 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和MySql中计算时间差的方法
2011/04/22 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
javascript一点特殊用法
2008/05/28 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python 性能优化方法小结
2017/03/31 Python
Python输出带颜色的字符串实例
2017/10/10 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
销售文员的岗位职责
2013/11/20 职场文书
售后服务承诺书
2014/03/26 职场文书
微笑服务演讲稿
2014/05/13 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
2014年稽查工作总结
2014/12/20 职场文书
售票员岗位职责
2015/02/15 职场文书
实习介绍信范文
2015/05/05 职场文书
师范生教育见习总结
2015/06/23 职场文书
培训简讯范文
2015/07/20 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
Python os和os.path模块详情
2022/04/02 Python