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


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文件在eclipse下报错问题解决方法
Apr 17 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
一文了解Vue中的nextTick
May 06 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
创建与框架无关的JavaScript插件
Dec 01 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
短波的认识
2021/03/01 无线电
那些年一起学习的PHP(一)
2012/03/21 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python避免死锁方法实例分析
2015/06/04 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python实现飞船大战
2020/04/24 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
香港化妆品经销商:我的公主
2016/08/05 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
银行办理业务介绍信
2014/01/18 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
与死神共舞观后感
2015/06/15 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
python小程序之飘落的银杏
2021/04/17 Python
MySQL的索引你了解吗
2022/03/13 MySQL