溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了微信小程序基于本地緩存實現點贊功能的方法。分享給大家供大家參考，具體如下：
wxml中的寫法
注意：
1. 使用wx:if="{{condition}}" wx:else實現圖標的切換效果；
2. 為圖片綁定點擊事件bindtap="toCollect"，兩個image標簽都要綁定！
<image wx:if="{{collection}}" src="/images/icon/pic1.png" bindtap="toCollect"></image>
<image wx:else src="/images/icon/pic2.png" bindtap="toCollect"></image>
js中的寫法：
Page({
data: {
},
onLoad: function(option) {
// 獲取接收到的id值
var getId = option.id;
// 讓接收到的id值傳遞到data:{}里面
this.setData({
currentId: getId
});
// 讀取所有的文章列表點贊緩存狀態
var cache = wx.getStorageSync('cache_key');
// 如果緩存狀態存在
if (cache) {
// 拿到所有緩存狀態中的1個
var currentCache = cache[getId];
// 把拿到的緩存狀態中的1個賦值給data中的collection，如果當前文章沒有緩存狀態，currentCache 的值就是 false，如果當前文章的緩存存在，那么 currentCache 就是有值的，有值的說明 currentCache 的值是 true
this.setData({
collection: currentCache
})
} else {
// 如果所有的緩存狀態都不存在 就讓不存在的緩存存在
var cache = {};
// 既然所有的緩存都不存在，那么當前這個文章點贊的緩存也不存在，我們可以把當前這個文章點贊的緩存值設置為 false
cache[getId] = false;
// 把設置的當前文章點贊放在整體的緩存中
wx.setStorageSync('cache_key',cache);
}
},
// 點擊圖片的點贊事件 這里使用的是同步的方式
toCollect: function(event) {
// 獲取所有的緩存
var cache = wx.getStorageSync('cache_key');
// 獲取當前文章是否被點贊的緩存
var currentCache = cache[this.data.currentId];
// 取反，點贊的變成未點贊 未點贊的變成點贊
currentCache = !currentCache;
// 更新cache中的對應的1個的緩存值，使其等于當前取反的緩存值
cache[this.data.currentId] = currentCache;
// 重新設置緩存
wx.setStorageSync('cache_key',cache);
// 更新數據綁定,從而切換圖片
this.setData({
// collection 默認的是 false
collection: currentCache
});
// 交互反饋
wx.showToast({
title: currentCache?'點贊':'取消',
icon: 'success',
duration: 2000
});
}
})
js中操作反饋—wx.showModal的寫法：
// 點擊圖片的點贊事件 這里使用的是同步的方式
toCollect: function(event) {
// 獲取緩存，得到當前文章是否被點贊
var cache = wx.getStorageSync('cache_key');
// 獲取當前文章是否被點贊的緩存
var currentCache = cache[this.data.currentId];
// 取反，點贊的變成未點贊 未點贊的變成點贊
currentCache = !currentCache;
// 更新cache中的對應的1個的緩存值，使其等于當前取反的緩存值
cache[this.data.currentId] = currentCache;
// 調用 showModal方法
this.showModal(cache,currentCache);
}，
showModal: function(cache,currentCache) {
var that = this;
wx.showModal({
title: "點贊"
content: currentCache?"要點贊嗎？":"要取消贊嗎？",
showCancel: "true",
cancelText: "取消",
cancelColor: "#666",
confirmText: "確定",
confirmColor: "#222",
success: function(res) {
if (res.confirm) {
// 重新設置緩存
wx.setStorageSync('cache_key',cache);
// 更新數據綁定,從而切換圖片
that.setData({
collection: currentCache
})
}
}
})
}
希望本文所述對大家微信小程序開發有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
