這次給大家?guī)碓鯓邮褂梦⑿判〕绦蜃龀鎏砑邮詹?，使用微信小程序做出添加收藏的注意事項有哪些，下面就是實?zhàn)案例，一起來看一下。
需求
點擊收藏后顯示已收藏，在另一個頁面出現(xiàn)目前點擊收藏的項目
需要解決的問題
-
點擊收藏后需要顯示已收藏，并且文字狀態(tài)改變
-
另一個頁面如何知道你點擊了收藏，并且獲得你點擊收藏的數(shù)據(jù)
如何解決？
-
數(shù)據(jù)狀態(tài)綁定，并且由狀態(tài)控制樣式（三元運算符）
-
緩存（setStorageSync,getStorageSync）,點擊頁面設置緩存（數(shù)據(jù)的id），顯示頁面獲取緩存，通過獲得緩存id，將整個數(shù)據(jù)中的獲得的id那一項，取出，放入新的數(shù)組
具體實現(xiàn)
wxml
<image></image>
<text>{{isClick?'已收藏':'收藏'}}</text>
登錄后復制
點擊頁面js
Page({
data: {
job: [],
jobList: [],
id: '',
isClick: false,
jobStorage: [],
jobId: ''
},
haveSave(e) {
if (!this.data.isClick == true) {
let jobData = this.data.jobStorage;
jobData.push({
jobid: jobData.length,
id: this.data.job.id
})
wx.setStorageSync('jobData', jobData);//設置緩存
wx.showToast({
title: '已收藏',
});
} else {
wx.showToast({
title: '已取消收藏',
});
}
this.setData({
isClick: !this.data.isClick
})
}
})
登錄后復制
顯示頁面js
import jobList from '../../api/detail'
Page({
data: {
id:'',
job:[],
savejob:[],
},
onLoad: function (options) {
console.log(wx.getStorageSync('jobData'));
let savejob = wx.getStorageSync('jobData')//獲得緩存
let index = savejob.length-1;
console.log(savejob[index].id);
let jobid = savejob[index].id
let temp= jobList[jobid] //將獲得緩存后匹配的數(shù)據(jù)放入新的數(shù)組
let job= [];
job.push(temp);
this.setData({
id:index,
job: job,
})
},
})
登錄后復制
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關注有卡有網(wǎng)。
