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


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 相关文章推荐
自动更新作用
Oct 08 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
小程序实现上下切换位置
Nov 16 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
一个目录遍历函数
2006/10/09 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python pymongo模块用法示例
2018/03/31 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
软件测试英文面试题
2012/10/14 面试题
红色故事演讲稿
2014/05/22 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
详解Go语言中Get/Post请求测试
2022/06/01 Golang