微信小程序实现收藏与取消收藏切换图片功能


Posted in Javascript onAugust 03, 2018

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

微信小程序实现收藏与取消收藏切换图片功能

微信小程序实现收藏与取消收藏切换图片功能

微信小程序实现收藏与取消收藏切换图片功能

微信小程序实现收藏与取消收藏切换图片功能

总结

以上所述是小编给大家介绍的微信小程序实现收藏与取消收藏切换图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 #Javascript
mpvue跳转页面及注意事项
Aug 03 #Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 #Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 #Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 #Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 #Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 #Javascript
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
jQuery select控制插件
2009/08/17 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
简历中自我评价分享
2013/10/09 职场文书
护理实习自我鉴定
2013/12/14 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
卖车协议书范例
2014/09/16 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
乱世佳人观后感
2015/06/08 职场文书