微信小程序实现列表页和详情页同步收藏
第一次写博客耶～不太会搞，记录一下这两天搞定的需求，原本想放弃了来着，结果做到了开心啊转圈圈吼吼吼
需求
这是毕业设计的项目，使用微信小程序，首页分类展示兼职列表，也有分页的，每个兼职在首页有收藏按钮，在详情页也可以收藏，希望做到这两个收藏按钮可以同步操作和表现收藏状态。
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.id
const jobslist = that.data.jobslist
for (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 = this
const 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，先记录到此啦～