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


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 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
JavaScript this 深入理解
Jul 30 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
layui表格实现代码
May 20 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 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 简单数组排序实现代码
2009/08/05 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php跨服务器访问方法小结
2015/05/12 PHP
php创建图像具体步骤
2017/03/13 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
JS跨域代码片段
2012/08/30 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
jQuery实现手势解锁密码特效
2017/08/14 jQuery
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
Python中字符串的处理技巧分享
2016/09/17 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python程序慢的重要原因
2020/09/04 Python
服装公司总经理岗位职责
2013/11/30 职场文书
采购主管的岗位职责
2013/12/17 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
大专生找工作自荐书
2014/06/10 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
Docker下安装Oracle19c
2022/04/13 Servers
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android