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


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学习网址备忘
May 29 Javascript
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
js indexOf()定义和用法
Oct 21 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
Vue-CLI与Vuex使用方法实例分析
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
php二分法在IP地址查询中的应用
2008/08/12 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
javascript之bind使用介绍
2011/10/09 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
python手写均值滤波
2020/02/19 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
运动会解说词100字
2014/01/31 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
2014年保管员工作总结
2014/11/18 职场文书
Web应用开发TypeScript使用详解
2022/05/25 Javascript