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


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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
js获取微信版本号的方法
May 12 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
关于vue面试题汇总
Mar 20 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
在实例中重学JavaScript事件循环
Dec 03 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/10/09 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python中的取模运算方法
2018/11/10 Python
Django中间件基础用法详解
2019/07/18 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python实现IOU计算案例
2020/04/12 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
自荐信封面
2013/12/04 职场文书
教室标语大全
2014/06/21 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
党员民主评议个人总结
2014/10/20 职场文书
自我检讨书怎么写
2015/05/07 职场文书
名人传读书笔记
2015/06/26 职场文书