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


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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
javascript解析json实例详解
Nov 05 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
php实现的ping端口函数实例
2014/11/12 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python单例模式实例分析
2015/04/08 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Django 再谈一谈json序列化
2020/03/16 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
毕业生求职简历的自我评价
2013/10/07 职场文书
本科毕业生自我鉴定
2013/11/02 职场文书
优秀毕业生求职推荐信范文
2013/11/21 职场文书
4s客服专员岗位职责
2013/12/01 职场文书
教师队伍管理制度
2014/01/14 职场文书
公司合作协议范文
2014/10/01 职场文书