小程序点赞收藏功能的实现代码示例


Posted in Javascript onSeptember 07, 2018

本文介绍了小程序点赞收藏功能的实现代码示例,分享给大家,具体如下:

/收藏/

focusFavoriteTab: function (e) {
  var that = this;
  var isFocus = that.data.isFocus;
  console.log("isFocus", isFocus)
  var itemId = that.data.itemId;
  if (isFocus) {
   favoriteService.cancel(that, itemId).then((res) => {
    wx.showToast({
     title: "取消收藏",
     icon: 'success',
     duration: 1000
    });
    this.setData({
     isFocus: false,
    });
   })
  } else {
   favoriteService.add(that, itemId).then((res) => {
    wx.showToast({
     title: res.data == 1 ? "收藏成功" : "收藏失败",
     icon: 'success',
     duration: 1000
    });
    this.setData({
     isFocus: true,
    });
   });
  }
 },

/点赞/

focuslikeTab: function (e) {
  var that = this;
  var isLike = that.data.isLike;
  let itemDetail = this.data.itemDetail 
  var itemId = that.data.itemId;
  if (isLike) {
   itemService.cancellike(that, itemId).then((res) => {
    wx.showToast({
     title: "点赞取消",
     icon: 'success',
     duration: 1000
    });
    itemDetail.liked--;
    this.setData({
     itemDetail:itemDetail
    });
    this.setData({
     isLike: false,
    });
   })
  } else {
   itemService.addlike(that, itemId).then((res) => {
    wx.showToast({
     title: res.data == 1 ? "点赞成功" : "点赞失败",
     icon: 'success',
     duration: 1000
    });
    itemDetail.liked++;
    this.setData({
     itemDetail: itemDetail
    });
    this.setData({
     isLike: true,
    });
   });
  }
 },

取消点赞功能

/*更新点赞*/ 
 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实现随机返回数组的一个元素
Aug 13 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
webuploader实现上传图片到服务器功能
Aug 16 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 #Javascript
vue实现打印功能的两种方法
Sep 07 #Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 #Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 #Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 #Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 #Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 #Javascript
You might like
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
原生js生成图片验证码
2020/10/11 Javascript
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
django 简单实现登录验证给你
2019/11/06 Python
python实现小世界网络生成
2019/11/21 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
Otel.com:折扣酒店预订
2017/08/24 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
类如何去实现接口
2013/12/19 面试题
幼儿园中秋节活动方案2013
2014/01/29 职场文书
小学新学期寄语
2014/04/02 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
mysql 索引合并的使用
2021/08/30 MySQL
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技