wxml界面使用image標籤
<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({
/**
* 頁面的初始數據
*/
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() {
}
})
這個是對之前做完的整理,需要的話可以去慕課網購買7月老師的視頻。有什麼問題可以加我微信cdycslcbh,免費解答。