小程序实现列表点赞功能
最近在开发一个小程序,想增加一个赞功能。我怎么能意识到呢?因为需要和后台服务器同步数据,想了好几天怎么实现赞和取消赞的逻辑。经过两天的实践和调试,终于实现了。
想法如下:
1.找到相应文章列表的id
(我用wx:for进行列表渲染和模板来实现文章列表,所以如果找不到对应的id,可能在我点击一个列表的时候会出现一个事件,其他列表也会发生变化。)
2.在前端,wx.setStorageSync用于保存对应列表喜欢的id的缓存
之后,通过缓存判断文章是否得到了好评,避免重复好评
3.喜欢和取消的数量必须有1或-1的相应变化
4.后台服务器的数据同步变化
代码如下
//像处理函数(xx.js文件)Zan :函数(item _ id) {var那=thisvar显示;//传递到数据库赞var cookie _ mid=wx . getstorageync(' Zan ')| |[]的状态;//获取mid var newmessage=[]的所有赞;for(var I=0;I . that . data . item _ list . length;I) {if (that.data.item _ list [I]。id==item _ id){//遍历找到对应的id varnum=that . data . item _ list[I]。like _ num//当前赞号var isshow//赞if (cookie _ mid)的状态。includes(item _ id)){//表示您已经被表扬,取消表扬为(var j=0;j cookie _ mid.lengthj){ if(cookie _ mid[j]==item _ id){ cookie _ mid . splice(j,1);//删除mid}} -取消表扬的numis show=0;//像state . setdata({[` item _ list[$ { I }])。like _ num`] :num,//es6模板语法(反撇号字符)[` item _ list [$ {I}]。青睐_ img`] : '.Wx.showToast({ title: '取消点赞!icon: 'none' }) //console.log('前端取消表扬' is show)} else { is show=1;//比如状态号;that . setdata({[` item _ list[$ { I }])。like _ num`] :num,//es6模板语法(撇号字符)[` item _ list [$ {I}]。青睐_ img`] : './././/添加midwx . setstorageync(' Zan ',cookie _ mid);Wx.showToast({ title: '赞成功!',icon: 'none' }) //console.log('前端赞成功'是show)}//console . log(cookie _ mid);//赞扬数据同步到数据库wx . request({ URL : ' https://xxx.xxxx.xxx/zan.php', method : ' post ',header : { ' Content-Type ' : ' application/x-www-form-URL encoded ' }),data: { id: item_id,show: isshow,},success : function(RES){//console . log(' show : ' show)//console . log(RES . data);}})}}},/* * *喜欢*/青睐点击:函数(选项){ var item _ id=options . current target . dataset . id;//在这里找到列表的id//console . log(item _ id);//list id this . Zan(item _ id);},注意:
1.splice()和unshif()函数用于删除数组中的一个元素,并在原始元素的基础上添加一个元素。详细用法可以自己找。
2.[item _ list [$ {I}]。like _ num] :num,这是es6模板语法(注意它是一个反撇号字符),因为‘item _ list[I]的常规写法。like _ num' :num将在数组动态设置数据时报告以下错误。
3.不要把num和num写成num和num。我犯了这个错误,在表扬的时候总是导致数量变化上的错误。这让我检查了n遍逻辑运算,应该是正确的,我很晕。(怪自己基础不牢!) 4.如何在模板列表渲染中找到id?将{{id}}添加到。wxml文件,前提是wx:for的数据包含id字段:
在。wxml文件
5.基本的点赞功能就是这样实现的,但是页面刷新后,点赞图标恢复到原来的样式,刷新时需要进一步判断。
6.参考丰亿02011博客的这篇文章
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。
版权声明:小程序实现列表点赞功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。