本篇文章給大家帶來的内容是關于微信小程式執行個體：收藏與取消收藏圖檔以及切換圖檔的功能效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
wxml界面使用image标簽
js檔案上的腳本：// pages/post_detail/post_detail.js
var postData = require("../../data/posts_data.js")
Page({
data: {
},
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);
// 從緩存中讀取所有的緩存狀态
var postsCollected = wx.getStorageSync("posts_Collected")
//如果緩存為真，執行以下代碼
if (postsCollected) {
//讀取其中一個緩存狀态
var postsCollected = postsCollected[postId]
this.setData({
//将是否被收藏的狀态上綁定到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)
// //更新資料綁定變量,進而實作切換圖檔。
// this.setData({
// collected: postCollected
// })
this.showModal(postsCollected, postCollected)
// wx.showToast({
// title: postCollected ? "收藏成功" : "取消收藏",
// duration: 800,
// icon: "success"
// })
// wx.showModal({
// title: '确定收藏',
// content: '這是一個模态彈窗',
// success: function (res) {
// if (res.confirm) {
// console.log('使用者點選确定')
// } else if (res.cancel) {
// console.log('使用者點選取消')
// }
// }
// })
console.log("onCollectionTap");
},
//使用showModal API來實作界面上邏輯操作。
showModal: function(postsCollected, postCollected) {
//這個注意一下，由于this是在page下調用的方法，這裡是在自定義函數下，所有必須重新指派到一個新的變量，才能重新使用，不明白的同學們，記住就行。
var ts = this;
wx.showModal({
title: '收藏',
content: postCollected ? "收藏該文章" : "取消收藏該文章",
success: function(res) {
if (res.confirm) {
wx.setStorageSync('posts_Collected', postsCollected)
//更新資料綁定變量,進而實作切換圖檔。
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");
},
onReady: function() {
},
onShow: function() {
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
console.log("到底了");
},
onShareAppMessage: function() {
}
})
相關推薦：