這篇文章主要介紹了微信小程序中如何實(shí)現(xiàn)收藏與取消收藏圖片功能,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)寧遠(yuǎn),十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
wxml界面使用image標(biāo)簽
<image wx:if="{{collected}}" catchtap='onCollectionTap' src='/images/icon/collection.png'></image> <image wx:else src='/images/icon/collection-anti.png' catchtap='onCollectionTap'></image>
js文件上的腳本:
// pages/post_detail/post_detail.js var postData = require("../../data/posts_data.js") Page({ /** * 頁面的初始數(shù)據(jù) */ data: { }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function(options) { var postId = options.id; this.data.currentPostId = postId var postsData = postData.postList[postId]; console.log(postsData); // this.data.postData=postsData; this.setData({ post_key: postsData }) // var postsCollected={ // 1:"true", // 2:"false", // 3:"true", // } // console.log(postData); // 從緩存中讀取所有的緩存狀態(tài) var postsCollected = wx.getStorageSync("posts_Collected") //如果緩存為真,執(zhí)行以下代碼 if (postsCollected) { //讀取其中一個(gè)緩存狀態(tài) var postsCollected = postsCollected[postId] this.setData({ //將是否被收藏的狀態(tài)上綁定到collected這個(gè)變量上 collected: postsCollected }) } else { var postsCollected = {}; postsCollected[postId] = false; wx.setStorageSync("posts_Collected", postsCollected) } }, onCollectionTap: function(event) { //獲取緩存的方法 var postsCollected = wx.getStorageSync('posts_Collected'); var postCollected = postsCollected[this.data.currentPostId]; console.log(postCollected); //取反操作,收藏的話,點(diǎn)擊變成未收藏,反之,變成收藏。 postCollected = !postCollected; postsCollected[this.data.currentPostId] = postCollected; // //更新文章是否收藏的緩存值。 // wx.setStorageSync('posts_Collected', postsCollected) // //更新數(shù)據(jù)綁定變量,從而實(shí)現(xiàn)切換圖片。 // this.setData({ // collected: postCollected // }) this.showModal(postsCollected, postCollected) // wx.showToast({ // title: postCollected ? "收藏成功" : "取消收藏", // duration: 800, // icon: "success" // }) // wx.showModal({ // title: '確定收藏', // content: '這是一個(gè)模態(tài)彈窗', // success: function (res) { // if (res.confirm) { // console.log('用戶點(diǎn)擊確定') // } else if (res.cancel) { // console.log('用戶點(diǎn)擊取消') // } // } // }) console.log("onCollectionTap"); }, //使用showModal API來實(shí)現(xiàn)界面上邏輯操作。 showModal: function(postsCollected, postCollected) { //這個(gè)注意一下,由于this是在page下調(diào)用的方法,這里是在自定義函數(shù)下,所有必須重新賦值到一個(gè)新的變量,才能重新使用,不明白的同學(xué)們,記住就行。 var ts = this; wx.showModal({ title: '收藏', content: postCollected ? "收藏該文章" : "取消收藏該文章", success: function(res) { if (res.confirm) { wx.setStorageSync('posts_Collected', postsCollected) //更新數(shù)據(jù)綁定變量,從而實(shí)現(xiàn)切換圖片。 ts.setData({ collected: postCollected }) console.log('用戶點(diǎn)擊確定') } else if (res.cancel) { console.log('用戶點(diǎn)擊取消') } } }) }, // onCollectionTap: function(event) { // var baoxue = wx.getStorageSync("key"); // console.log(baoxue); // }, onShareTap: function(event) { // wx.removeStorageSync("key") //緩存的上限最大不能超過10MB wx.clearStorageSync(); console.log("onShareTap"); }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function() { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function() { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function() { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function() { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function() { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function() { console.log("到底了"); }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function() { } })
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序中如何實(shí)現(xiàn)收藏與取消收藏圖片功能”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
文章名稱:微信小程序中如何實(shí)現(xiàn)收藏與取消收藏圖片功能
標(biāo)題鏈接:http://muchs.cn/article28/ppjhcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、App設(shè)計(jì)、網(wǎng)站營(yíng)銷、靜態(tài)網(wǎng)站、域名注冊(cè)、標(biāo)簽優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)