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


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中取绝对值的2种方法
Jul 09 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
js+css实现导航效果实例
Feb 10 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
JavaScript实现贪吃蛇游戏
Jun 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
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
python操作mysql代码总结
2018/06/01 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
香港化妆品经销商:我的公主
2016/08/05 全球购物
世界上最好的帽子:Tilley
2016/11/27 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
给朋友的道歉信
2014/01/09 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
党的生日演讲稿
2014/09/10 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
党支部培养考察意见
2015/06/02 职场文书
python - asyncio异步编程
2021/04/06 Python
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫