微信小程序?qū)崿F(xiàn)收藏與取消收藏切換圖片功能
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() { } })
總結(jié)
以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)收藏與取消收藏切換圖片功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JS注冊(cè)/移除事件處理程序(ExtJS應(yīng)用程序設(shè)計(jì)實(shí)戰(zhàn))
最常做的事情就是注冊(cè)事件處理程序,因?yàn)樵贓xtJS的世界里,幾乎完全由時(shí)間組成,下面是處理程序案例,感興趣的朋友可以參考下哈,希望可以幫助到你2013-05-05基于JavaScript如何實(shí)現(xiàn)私有成員的語法特征及私有成員的實(shí)現(xiàn)方式
本文給大家介紹基于JavaScript如何實(shí)現(xiàn)私有成員的語法特征及私有成員的實(shí)現(xiàn)方式,涉及到j(luò)avascript語法特征相關(guān)知識(shí),對(duì)本文感興趣的朋友快來一起學(xué)習(xí)吧2015-10-10微信小程序視圖容器(swiper)組件創(chuàng)建輪播圖
這篇文章主要為大家詳細(xì)介紹了微信小程序視圖容器(swiper)組件創(chuàng)建輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08淺析JavaScript中的特殊函數(shù)及用法小結(jié)
JavaScript中的函數(shù)本質(zhì)上是一個(gè)對(duì)象,我們可以將這個(gè)對(duì)象賦值給一個(gè)變量,這就使JavaScript中的函數(shù)變得非常的靈活,現(xiàn)在就來淺看一下JavaScript中函數(shù)的一些用法,需要的朋友可以參考下2022-06-06原生js實(shí)現(xiàn)fadein 和 fadeout淡入淡出效果
這篇文章主要介紹了通過原生js實(shí)現(xiàn)fadein 和 fadeout淡入淡出效果,需要的朋友可以參考下2014-06-06