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


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 相关文章推荐
javascript动态加载实现方法一
Aug 22 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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
PHP脚本的10个技巧(1)
2006/10/09 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP之header函数详解
2021/03/02 PHP
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
React diff算法的实现示例
2018/04/20 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
javascript实现智能手环时间显示
2020/09/18 Javascript
python复制与引用用法分析
2015/04/08 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
会计学自我鉴定
2014/02/06 职场文书
小学教师国培感言
2014/02/08 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
学校联谊协议书
2014/09/16 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
公务员年度考核评语
2014/12/31 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
入党团支部推荐意见
2015/06/02 职场文书
关于观后感的作文
2015/06/18 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
python实现简单的名片管理系统
2021/04/26 Python
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
Redis分布式锁的7种实现
2022/04/01 Redis