重慶分公司,新征程啟航
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊、服務(wù)器等服務(wù)
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊、服務(wù)器等服務(wù)
wxml界面使用image標(biāo)簽
為新蔡等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及新蔡網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、成都做網(wǎng)站、新蔡網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
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) { //讀取其中一個緩存狀態(tài) var postsCollected = postsCollected[postId] this.setData({ //將是否被收藏的狀態(tài)上綁定到collected這個變量上 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); //取反操作,收藏的話,點擊變成未收藏,反之,變成收藏。 postCollected = !postCollected; postsCollected[this.data.currentPostId] = postCollected; // //更新文章是否收藏的緩存值。 // wx.setStorageSync('posts_Collected', postsCollected) // //更新數(shù)據(jù)綁定變量,從而實現(xiàn)切換圖片。 // this.setData({ // collected: postCollected // }) this.showModal(postsCollected, postCollected) // wx.showToast({ // title: postCollected ? "收藏成功" : "取消收藏", // duration: 800, // icon: "success" // }) // wx.showModal({ // title: '確定收藏', // content: '這是一個模態(tài)彈窗', // success: function (res) { // if (res.confirm) { // console.log('用戶點擊確定') // } else if (res.cancel) { // console.log('用戶點擊取消') // } // } // }) console.log("onCollectionTap"); }, //使用showModal API來實現(xiàn)界面上邏輯操作。 showModal: function(postsCollected, postCollected) { //這個注意一下,由于this是在page下調(diào)用的方法,這里是在自定義函數(shù)下,所有必須重新賦值到一個新的變量,才能重新使用,不明白的同學(xué)們,記住就行。 var ts = this; wx.showModal({ title: '收藏', content: postCollected ? "收藏該文章" : "取消收藏該文章", success: function(res) { if (res.confirm) { wx.setStorageSync('posts_Collected', postsCollected) //更新數(shù)據(jù)綁定變量,從而實現(xiàn)切換圖片。 ts.setData({ collected: postCollected }) console.log('用戶點擊確定') } else if (res.cancel) { console.log('用戶點擊取消') } } }) }, // 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)聽用戶下拉動作 */ onPullDownRefresh: function() { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function() { console.log("到底了"); }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function() { } })
總結(jié)
以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)收藏與取消收藏切換圖片功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!