您好,登錄后才能下訂單哦!
這篇文章主要介紹使用小程序做出添加收藏的方法,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
需求
點(diǎn)擊收藏后顯示已收藏,在另一個(gè)頁面出現(xiàn)目前點(diǎn)擊收藏的項(xiàng)目
需要解決的問題
點(diǎn)擊收藏后需要顯示已收藏,并且文字狀態(tài)改變
另一個(gè)頁面如何知道你點(diǎn)擊了收藏,并且獲得你點(diǎn)擊收藏的數(shù)據(jù)
如何解決?
數(shù)據(jù)狀態(tài)綁定,并且由狀態(tài)控制樣式(三元運(yùn)算符)
緩存(setStorageSync,getStorageSync),點(diǎn)擊頁面設(shè)置緩存(數(shù)據(jù)的id),顯示頁面獲取緩存,通過獲得緩存id,將整個(gè)數(shù)據(jù)中的獲得的id那一項(xiàng),取出,放入新的數(shù)組
具體實(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>
點(diǎn)擊頁面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 }) } })
顯示頁面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, }) }, })
以上是“使用小程序做出添加收藏的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。