本篇文章给大家带来的内容是关于微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
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() {
}
})
相关推荐：
