微信小程序收藏功能的實(shí)現(xiàn)代碼
更新時(shí)間：2018年06月12日 10:41:42 作者：kerin
這篇文章主要介紹了微信小程序收藏功能的實(shí)現(xiàn)代碼,基本功能是點(diǎn)擊收藏后顯示已收藏，在另一個(gè)頁面出現(xiàn)目前點(diǎn)擊收藏的項(xiàng)目。需要的朋友可以參考下
需求
點(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,
})
},
})
總結(jié)
以上所述是小編給大家介紹的微信小程序收藏功能的實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板
這篇文章主要為大家詳細(xì)介紹了Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
echarts-for-weixin是ECharts官方維護(hù)的一個(gè)開源項(xiàng)目，提供了一個(gè)微信小程序組件，可以通過這個(gè)組件在微信小程序中使用?ECharts?繪制圖表。本文將通過示例詳解微信小程序使用ECharts的方法，感興趣的可以了解一下2022-06-06
這篇文章主要介紹了JavaScript生成SQL查詢表單的方法,涉及javascript頁面元素及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
選項(xiàng)卡的實(shí)現(xiàn)方法比較多，但原理基本上都差不多，隱藏與顯示輪換2009-04-04
這篇文章主要為大家詳細(xì)介紹了JS、CSS和HTML實(shí)現(xiàn)注冊頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用
這篇文章主要介紹了JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用場景與使用區(qū)別的介紹，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來dump某些對象的詳細(xì)信息,需要的朋友可以參考下2014-12-12
我想用JS實(shí)現(xiàn)對文本的加密和解密,想用維吉尼亞密碼算法,誰有現(xiàn)成代碼啊2010-11-11
這篇文章主要介紹了webpack4處理SCSS的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
微信小程序開發(fā)之大轉(zhuǎn)盤 仿天貓超市抽獎實(shí)例
本篇文章主要介紹了微信小程序開發(fā)之大轉(zhuǎn)盤 仿天貓超市抽獎實(shí)例，這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-12-12