怎么在小程序中实现一个点赞收藏功能
今天就跟大家聊聊有关怎么在小程序中实现一个点赞收藏功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
具体如下:
/收藏/
focusFavoriteTab:function(e){ varthat=this; varisFocus=that.data.isFocus; console.log("isFocus",isFocus) varitemId=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){ varthat=this; varisLike=that.data.isLike; letitemDetail=this.data.itemDetail varitemId=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){ varthat=this; vardata=e.currentTarget.dataset; varmid=data.mid; varcookie_mid=wx.getStorageSync('zan')||[];//获取全部点赞的mid varisadd=1; varnewmessage=[]; if(cookie_mid.includes(mid)){//说明已经点过赞,取消赞 isadd=0; varm=0; for(varjincookie_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){ varmessage=that.data.message; for(variinmessage){ 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,并通过循环遍历改变某个留言的点赞数,然后直接重新赋值,就能动态改变点赞数!
看完上述内容,你们对怎么在小程序中实现一个点赞收藏功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注恰卡编程网行业资讯频道,感谢大家的支持。
推荐阅读
-
微信小程序能做什么什么是微信小程序
微信是目前用户数最多的应用,过去人们初次见面,都免不了要互相发名片、留电话,现在则变成了加微信好友。打开你的微信,用手按住页面向下...
-
小程序在哪里找(小程序开发一个多少钱啊)
微信里面的小程序,几乎可以代替手机App,不用安装就能使用,超方便!今天就给大家推荐5个宝藏级的微信小程序,实用又免费,真是让你爱...
-
小程序和h5的区别有哪些快速收藏
关于小程序与H5,在之前实际上是存在很多争议的,很多人觉得他们是一样的应用,但其实并不是这样的,差别还是非常大的,因为一个是网页,...
-
小程序怎么开发调用微信支付及微信回调地址
小程序怎么开发调用微信支付及微信回调地址本篇内容主要讲解“小程序怎...
-
小程序列表懒加载如何实现
小程序列表懒加载如何实现本文小编为大家详细介绍“小程序列表懒加载如...
-
小程序怎么与后端Java接口交互实现HelloWorld
小程序怎么与后端Java接口交互实现HelloWorld本篇内容主...
-
小程序分销系统开发常见的功能有哪些
小程序分销系统开发常见的功能有哪些这篇文章主要介绍“小程序分销系统...
-
茶叶小程序开发需要哪些功能
茶叶小程序开发需要哪些功能本篇内容介绍了“茶叶小程序开发需要哪些功...
-
健身行业小程序开发功能及好处有哪些
健身行业小程序开发功能及好处有哪些这篇文章主要讲解了“健身行业小程...
-
直播小程序开发需要哪些功能
直播小程序开发需要哪些功能本篇内容主要讲解“直播小程序开发需要哪些...