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


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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
使用js获取伪元素的content实例
Oct 24 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 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
实例解析php的数据类型
2018/10/24 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
Python爬虫教程知识点总结
2020/10/19 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
自我反省检讨书
2014/01/23 职场文书
职工代表大会主持词
2014/04/01 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
微观世界观后感
2015/06/10 职场文书
红色影片观后感
2015/06/18 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript