微信小程序实现列表页和详情页同步收藏

第一次写博客耶～不太会搞，记录一下这两天搞定的需求，原本想放弃了来着，结果做到了开心啊转圈圈吼吼吼

需求

这是毕业设计的项目，使用微信小程序，首页分类展示兼职列表，也有分页的，每个兼职在首页有收藏按钮，在详情页也可以收藏，希望做到这两个收藏按钮可以同步操作和表现收藏状态。

bug层出不穷233333

首页列表里点击按钮，虽然可以绑定这个兼职的id，可是不知道怎么做更改状态，想着首页干脆仅做状态展示好了，在详情页操作收藏，这样回到列表却没有实时更新状态呀！

这里我把根据页码请求列表的方法放在onLoad里的，每次回到首页不会再次请求，自然不会更新状态，然后我把请求放在onShow里，可是这样每次到首页就会退到第一页的数据，用户体验贼差，而且每次回到这一页还会触发onReachBottom方法，让人很不舒服，总不能让人一次次到首页一次次刷新看收藏状态吧，也想过使用缓存把兼职列表存下来，可是这样和onLoad没差，而且查了一下小程序缓存最多10M，肯定不可行，主要还是想让首页的展示丝滑些（那列表请求就得放在onLoad里）。

一度想放弃，首页干脆也不展示收藏状态好了，可是少了收藏按钮总觉得光秃秃的，和我的设计图出入太大了，强迫症表示很难受有个梗不想继续敲代码了

解决撒花

百度了很多可是好像没有和我一样的需求，这篇文章启发我辣，nice

解决方法核心就是利用setData进行列表局部刷新，词不达意，代码贴上

列表页收藏按钮实现局部更新数据

这里页面展示要绑定一个独特ID

<!---index.wxml---><view class="isStore" catchtap="toStore" data-id="{{joblist.id}}"><van-icon wx:if="{{joblist.store}}" name="star" color="#99ccff" size="46rpx" /><van-icon wx:else name="star-o" color="#99ccff" size="46rpx" /></view>

js里点击收藏按钮的方法

<!---index.js--->toStore: function(e){console.log('tostore',e)const openId = wx.getStorageSync('token') || '';const that = this// 操作收藏需要用户授权if(openId){//页面绑定的id在这里const jobId = e.currentTarget.dataset.idconst jobslist = that.data.jobslistfor (let i in jobslist){// 遍历兼职列表根据id定位点击的兼职，通过id请求操作收藏的方法if (jobId == jobslist[i].id) {console.log("id1", jobId)call.requestGet('jus/goStore', {openId: openId,id: jobId}, function (e) {// 请求成功，用这个id定位列表中的那个兼职并更改它的状态for (let i in jobslist) {if (jobId == jobslist[i].id) {console.log("id2", jobId)// 核心就在这里啦！！！！！（列表局部更改数据要这样拼接，很有用，记住啦～）取反这个数据就好了that.setData({["jobslist[" + i + "].store"]: !that.data.jobslist[i].store})return}}}, function () {});return}}} else {// 去授权页wx.navigateTo({url: '../authPage/authPage'})}},

详情页收藏按钮实现更新数据

<!---jobDetail.js--->onLoad: function (options) {console.log(options)this.setData({jobId: options.jobId})// 进入详情页会将带来id的缓存，再次回到列表页读取这个缓存wx.setStorageSync('jobId', options.jobId);},

<!---index.js--->onShow: function () {const openId = wx.getStorageSync('token');const jobId = wx.getStorageSync('jobId');const that = thisconst jobslist = this.data.jobslist// 进入详情页会埋下一个所访问的兼职id种子，回到首页，如果有这个id就会发起请求，更新此兼职的状态if(openId && jobId){call.requestGet('jus/findOne', {openId: openId,id: jobId}, function (e) {console.log('jobDetail', e)for (let i in jobslist) {if (jobId == jobslist[i].id) {console.log("id2",jobId)// 核心在这里啦！！！！！这里要获取这个兼职的状态，因为进入详情页不一定会操作收藏按钮that.setData({["jobslist[" + i + "].store"]: e.store})return}}wx.removeStorageSync('jobId')}, function () {});}},

Last but not least

前端小白一枚，这只是我捣鼓出来的方法，总觉得循环又循环有点笨，但是放在这里是能够达到期望的，不知道走过路过的大神是否有更好更高效的方法，万望指导一二。

这是解决需求后趁热打铁写的（还不是记性不好怕忘了），可能有目前没发现的bug，先记录到此啦～