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


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 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
微信JSSDK上传图片
Aug 23 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
jquery 获取json数据实现代码
2009/04/27 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
python中常用的九种预处理方法分享
2016/09/11 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
新闻报道策划方案
2014/06/11 职场文书
2014年纪委工作总结
2014/12/05 职场文书
被委托人身份证明
2015/08/07 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers