這篇文章主要介紹了微信小程式收藏功能的實現代碼,基本功能是點擊收藏後顯示已收藏,在另一個頁面出現目前點擊收藏的項目。需要的朋友可以參考下
需求
#點擊收藏後顯示已收藏,在另一個頁面出現目前點擊收藏的項目
需要解決的問題
點擊收藏後需要顯示已收藏,並且文字狀態改變
另一個頁面如何知道你點擊了收藏,並且獲得你點擊收藏的資料
如何解決?
資料狀態綁定,並且由狀態控制樣式(三元運算子)
快取(setStorageSync,getStorageSync),點擊頁面設定快取(資料的id),顯示頁面取得快取,透過取得快取id,將整個資料中的取得的id那一項,取出,放入新的陣列
具體實作
wxml
<image class="save " src="{{isClick?'../../youzan-image/save-s.png':'../../youzan-image/save.png'}}" bindtap="haveSave"></image> <text class="saveText">{{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] //将获得缓存后匹配的数据放入新的数组 let job= []; job.push(temp); this.setData({ id:index, job: job, }) }, })
以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!
相關推薦:
以上是關於微信小程式收藏功能的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!