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() { } })
总结
以上所述是小编给大家介绍的微信小程序实现收藏与取消收藏切换图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·贺岁齐唱【滚石】【WAV+CUE】
- 黑神话悟空上品虫校尉精魄获取方法一览|上品虫校尉精魄收集攻略
- 《指环王:夏尔的传说》推迟至2025年初发行
- 黑神话悟空上品蝎太子精魄获取方法一览|上品蝎太子精魄收集攻略
- 银霞.1977-《台北66电影原声带》台湾复刻版[WAV+CUE]
- 银霞.1980-《你那好冷的小手》台湾珍藏纪念版[WAV+CUE]