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


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 风格的HTML文本转义
Jul 01 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
JS+CSS实现动态时钟
Feb 19 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 发送数据
2006/10/09 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
python中的字典详细介绍
2014/09/18 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
详解python with 上下文管理器
2020/09/02 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
大学生自我鉴定
2013/12/08 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
魅力教师事迹材料
2014/01/10 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
投资意向书
2014/07/30 职场文书
公司员工安全协议书
2014/11/21 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Python中文纠错的简单实现
2021/07/07 Python
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python