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


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 相关文章推荐
Js nodeType 属性全面解析
Nov 14 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 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/09/23 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
详解js类型判断
2018/05/22 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python中Lambda表达式详解
2019/11/20 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
广告传媒专业应届生求职信
2014/03/01 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
大学生实习证明范本
2014/09/19 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
教研活动主持词
2015/07/03 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript