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


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 相关文章推荐
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
layui select动态添加option的实例
Mar 07 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 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
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
python求众数问题实例
2014/09/26 Python
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Django 大文件下载实现过程解析
2019/08/01 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
会计学专业学生的求职信范文
2014/01/27 职场文书
企业总经理任命书
2014/06/05 职场文书
酒店端午节活动方案
2014/08/26 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书