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


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 相关文章推荐
js停止输出代码
Jul 20 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
Node 模块原理与用法详解
May 13 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
删除无限级目录与文件代码共享
2006/07/12 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
javascript实现的listview效果
2007/04/28 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
师范生自荐信范文
2013/10/06 职场文书
自荐信的禁忌和要点
2013/10/15 职场文书
前台文员我鉴定
2014/01/12 职场文书
网络编辑岗位职责
2014/03/18 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
讲解MySQL增删改操作
2022/05/06 MySQL