小程序实现列表点赞功能

最近在开发一个小程序，想增加一个赞功能。我怎么能意识到呢？因为需要和后台服务器同步数据，想了好几天怎么实现赞和取消赞的逻辑。经过两天的实践和调试，终于实现了。

想法如下：

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博客的这篇文章

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。