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


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 原型模式实现OOP的再研究
Apr 09 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 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
使用Apache的rewrite技术
2006/06/22 PHP
用PHP中的 == 运算符进行字符串比较
2006/11/26 PHP
php笔记之常用文件操作
2010/10/12 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python写的一个文本编辑器
2014/01/23 Python
python类参数self使用示例
2014/02/17 Python
Python中动态创建类实例的方法
2017/03/24 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python实现读取json文件到excel表
2017/11/18 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
村居抓节水倡议书
2014/05/19 职场文书
开学典礼演讲稿
2014/05/23 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL