php实现收藏与取消,微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果...

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

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() {

}

})

相关推荐：