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


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 相关文章推荐
JS 判断代码全收集
Apr 28 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
JavaScript的一些小技巧分享
Jan 06 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
4.与数据库的连接
2006/10/09 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP比你想象的好得多
2014/11/27 PHP
php实现递归的三种基本方式
2020/07/04 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
Python解决鸡兔同笼问题的方法
2014/12/20 Python
python在不同层级目录import模块的方法
2016/01/31 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
Python二元赋值实用技巧解析
2019/10/25 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
幼儿园家长评语
2014/02/10 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
教师工作表现自我评价
2015/03/05 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
SQL写法--行行比较
2021/08/23 SQL Server
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle