這篇文章主要介紹了微信小程序收藏功能的實現(xiàn)代碼,基本功能是點擊收藏后顯示已收藏，在另一個頁面出現(xiàn)目前點擊收藏的項目。需要的朋友可以參考下
需求
點擊收藏后顯示已收藏，在另一個頁面出現(xiàn)目前點擊收藏的項目
需要解決的問題
-
點擊收藏后需要顯示已收藏，并且文字狀態(tài)改變
-
另一個頁面如何知道你點擊了收藏，并且獲得你點擊收藏的數(shù)據(jù)
如何解決？
-
數(shù)據(jù)狀態(tài)綁定，并且由狀態(tài)控制樣式（三元運算符）
-
緩存（setStorageSync,getStorageSync）,點擊頁面設(shè)置緩存（數(shù)據(jù)的id），顯示頁面獲取緩存，通過獲得緩存id，將整個數(shù)據(jù)中的獲得的id那一項，取出，放入新的數(shù)組
具體實現(xiàn)
wxml
<image class="save " src="{{isClick?'../../youzan-image/save-s.png':'../../youzan-image/save.png'}}" bindtap="haveSave"></image>
<text class="saveText">{{isClick?'已收藏':'收藏'}}</text>
登錄后復(fù)制
點擊頁面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);//設(shè)置緩存
wx.showToast({
title: '已收藏',
});
} else {
wx.showToast({
title: '已取消收藏',
});
}
this.setData({
isClick: !this.data.isClick
})
}
})
登錄后復(fù)制
顯示頁面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,
})
},
})
登錄后復(fù)制
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是關(guān)于微信小程序收藏功能的實現(xiàn)的詳細內(nèi)容，更多請關(guān)注有卡有網(wǎng)。
