微信小程序收藏功能的实现代码


Posted in Javascript onJune 12, 2018

需求

点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目

微信小程序收藏功能的实现代码

需要解决的问题

  1. 点击收藏后需要显示已收藏,并且文字状态改变
  2. 另一个页面如何知道你点击了收藏,并且获得你点击收藏的数据

如何解决?

  1. 数据状态绑定,并且由状态控制样式(三元运算符)
  2. 缓存(setStorageSync,getStorageSync),点击页面设置缓存(数据的id),显示页面获取缓存,通过获得缓存id,将整个数据中的获得的id那一项,取出,放入新的数组

具体实现

wxml

<image class="save " src="{{isClick?'../../youzan-image/save-s.png':'../../youzan-image/save.png'}}" bindtap="haveSave"></image>
   <text class="saveText">{{isClick?'已收藏':'收藏'}}</text>

点击页面js

Page({
  data: {
  job: [],
  jobList: [],
  id: '',
  isClick: false,
  jobStorage: [],
  jobId: ''
  },
  haveSave(e) {
  if (!this.data.isClick == true) {
   let jobData = this.data.jobStorage;
   jobData.push({
   jobid: jobData.length,
   id: this.data.job.id
   })
   wx.setStorageSync('jobData', jobData);//设置缓存
   wx.showToast({
   title: '已收藏',
   });
  } else {
   wx.showToast({
   title: '已取消收藏',
   });
  }
  this.setData({
   isClick: !this.data.isClick
  })
  }
 })

显示页面js

import jobList from '../../api/detail'
Page({
 data: {
 id:'',
 job:[],
 savejob:[],
 },
 onLoad: function (options) {
 console.log(wx.getStorageSync('jobData'));
 let savejob = wx.getStorageSync('jobData')//获得缓存
 let index = savejob.length-1;
 console.log(savejob[index].id);
 let jobid = savejob[index].id
 let temp= jobList[jobid] //将获得缓存后匹配的数据放入新的数组
 let job= [];
 job.push(temp);
 this.setData({
  id:index,
  job: job,
 })
 },
})

总结

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

Javascript 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
基于jquery的一个图片hover的插件
Apr 24 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 #Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 #Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 #Javascript
webpack分离css单独打包的方法
Jun 12 #Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 #Javascript
webpack 样式加载的实现原理
Jun 12 #Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 #Javascript
You might like
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python检测生僻字的实现方法
2016/10/23 Python
python中异常捕获方法详解
2017/03/03 Python
python爬取微信公众号文章
2018/08/31 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python pytest进阶之fixture详解
2019/06/27 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
护士自我鉴定范文
2013/10/06 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
爱之链教学反思
2014/04/30 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
行政主管岗位职责
2015/02/03 职场文书
2015年服务员工作总结
2015/04/08 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技