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


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 学习技巧
Feb 17 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
列表内容的选择
2006/06/30 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python中super关键字用法实例分析
2015/05/28 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python实现字符串和字典的转换
2018/09/29 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
利用python实现逐步回归
2020/02/24 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
在python中求分布函数相关的包实例
2020/04/15 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
专科应届生求职信
2013/11/24 职场文书
刑事案件上诉状
2015/05/23 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
vue+echarts实现多条折线图
2022/03/21 Vue.js