微信小程序收藏功能的实现代码
2018-06-12 10:41
941 查看
需求
点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目
需要解决的问题
- 点击收藏后需要显示已收藏,并且文字状态改变
- 另一个页面如何知道你点击了收藏,并且获得你点击收藏的数据
如何解决?
- 数据状态绑定,并且由状态控制样式(三元运算符)
- 缓存(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, }) }, })
总结
以上所述是小编给大家介绍的微信小程序收藏功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 微信小程序首页的分类功能和搜索功能的实现思路及代码详解
- 微信小程序实现收藏与取消收藏切换图片功能
- 微信小程序实现即时通信聊天功能的实例代码
- 微信小程序(一)使用缓存实现收藏功能
- 微信小程序底部功能栏的实现代码
- 4部分代码轻松实现微信小程序支付功能
- 微信小程序实现之手势锁功能实例代码
- 微信小程序 短信验证 功能的实现(附案例代码/前后端/直接用)
- 微信小程序倒计时功能实现代码
- 微信小程序 收藏功能实现
- 微信小程序车牌号码模拟键盘输入功能的实现代码
- 微信小程序6位或多位验证码密码输入框功能的实现代码
- 微信小程序 纯代码实现 单图片上传栏(含 上传功能和编辑功能)部分代码
- 利用PHP安装windows自动运行的服务,PHP程序可以实现长时间、自动运行、定时更新功能,直接可以用在项目中的类源代码
- 【微信小程序】登录功能实现及讲解(获取用户唯一标识)
- 微信小程序之"搜索历史"功能实现
- PHP实现微信小程序人脸识别刷脸登录功能
- 微信小程序实现图片上传功能实例(前端+PHP后端)