微信小程序云开发实现收藏及收藏页面(带样式布局)

第三个版本修改，应该没问题了

没找到完整的教程，自己琢磨着做了一个

一开始尝试用缓存数组做，但是一直搞不定取消收藏时删除对应的缓存数组数据，于是放弃。

又采用了数据库的方法，但是因为我收藏的不同表太多，又转用缓存来做

废话不多说，直接上代码

1、点击收藏页面

点击收藏，弹窗提示收藏成功；反之提示取消收藏

.wxml 这里贴出收藏按钮，不贴出全部布局

<view class="animal_collect"><block wx:if="{{isShow==false}}"><text bindtap="handleCollect" data-id="{{item.name_id}}" class="iconfont icon-shoucang"></text></block><block wx:if="{{isShow==true}}" ><text bindtap="handleCollect" data-id="{{item.name_id}}" class="iconfont icon-shoucang1"></text></block><view class="collect_text">收藏</view></view>

这里使用的是阿里巴巴矢量图标，要用图片直接将text替换成image就可以。

这个没什么样式
.wxss

.animal_collect{flex: 3;font-size: 30rpx;display: flex;align-items: center;
}

.js

data: {nameList:[],isShow: false,id: [],collect:[],},onLoad: function (options) {var id = parseInt(options.id);this.setData({id:id})// 换成自己的数据库在页面渲染db.collection('nameList').where({name_id:id}).get().then(res=>{this.setData({nameList:res.data})});//获取缓存数组里的isShow，即收藏状态，防止刷新后页面收藏丢失const Collect = wx.getStorageSync("collect")for(var i=0;i<Collect.length;i++){if(this.data.id==Collect[i].id){const isShow = Collect[i].isShowthis.setData({isShow})}}},//收藏按钮handleCollect(e){//取反let isShow = !this.data.isShowthis.setData({isShow})let collect = wx.getStorageSync("collect")|| [];//将收藏的文章信息放入缓存中，记得对照自己的数据库替换数据//id、name、src等可以自己取名字，只要在收藏wxml页面渲染记得换名字this.data.nameList.forEach((item,index)=>{let temp = {id:item.name_id,name:item.name_name,src:item.name_src,na_id:item.navigator_id,fa_id:item.family_id,test:item.detail_test,test1:item.detail_test1,test2:item.detail_test2,isShow:true}this.setData({temp})})//如果缓存中没有收藏过，则在缓存中插入数组const {id} = e.currentTarget.datasetconsole.log(id)//找到需要修改的文章索引const index= collect.findIndex(v=>v.id==id);console.log(index)console.log(collect[index])if(collect.length===0||collect[index]==undefined){collect.push(this.data.temp)wx.setStorageSync("collect_news",collect)}else{//如果缓存中已经存在收藏文章编号，则将isShow取反//删掉缓存中指定数组 可将下面这句改为 collect.splice(index,1);collect[index].isShow=!collect[index].isShowwx.setStorageSync("collect_news",collect)}//提示用户wx.showToast({title: isShow ? '收藏成功' : '取消收藏',icon:'success'})},

2、收藏页面获取缓冲数据

这是我做出来的页面效果

这是我的缓存数组数据

当缓存数组中isShow=true时显示
.wxml

<view class="first_tab">
<!--过滤 将收藏显示-->
<block
wx:for="{{collect}}"
wx:if="{{item.isShow===true}}"><navigator class="animal_item"wx:key="cat_type"wx:for-item="item"data-id="{{item.id}}"bindtap="handleGoDetail"><!-- 图片容器 --><view class="animal_img_wrap"><image class="animal_img" src="{{item.src?item.src:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2774277168,3696497128&fm=26&gp=0.jpg'}}" /></view><!-- 文字容器 --><view class="animal_info_wrap"><view class="animal_name">{{item.name}}</view></view></navigator></block>
</view>

.wxss

.animal_item{display: flex;border-bottom: 1px solid #ccc;padding: 16rpx 0;
}
.animal_img_wrap{display: flex;flex: 1;justify-content: center;
}
.animal_img{width: 150rpx;height: 150rpx;border-radius: 80%;
}
.animal_info_wrap{flex: 2;display: flex;flex-direction: column;justify-content: space-around;
}
.animal_name{display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-size: 32rpx;
}

最最最重要的就是js了
.js

const db = wx.cloud.database(
Page({data: {collect:[]},onLoad(options){const collect = wx.getStorageSync("collect")this.setData({collect})},//点击跳转到文章详情handleGoDetail(e){wx.navigateTo({url:'/pages/animal_detail/animal_detail?id='+e.currentTarget.dataset.id,})}
})
)

微信小程序云开发实现收藏及收藏页面(带样式布局)相关推荐

微信小程序云开发（2）——在页面显示云数据库的数据
微信小程序云数据库的查询可以参考"微信小程序云开发(1)" 在页面显示数据库里的数据在"pages/index/index.wxml"文件中输入以下代码: & ...
第三章 “我要点爆”微信小程序云开发之点爆方式页面和爆炸之音页面制作
点爆方式选择页面制作在app.json中配置页面路径增加selectbao点爆方式选择,编译创建页面文件,点爆方式选择页面通过单选按钮组选择跳转到相应的点爆页面. <view class=&q ...
微信小程序云开发入门(图文详解)
以下内容是我第一次微信小程序云开发的一次记录,从真正的0基础入门,到基本掌握一些内容. 其中遇到的一些问题,和根据网上的一些资料,整理出来真正可用的,实测可行的源代码. 以下放出我的github源码 ...
微信小程序云开发获取手机号
微信小程序云开发获取手机号一.页面中button组件open-type配置项 open-type="getPhoneNumber" 获取用户手机号,可以从 bindgetphon ...
【小程序】微信小程序云开发笔记详细教程（建议收藏）
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
技本功丨收藏！斜杠青年与你共探微信小程序云开发（下篇）
2019年2月26日,人们为了一个杯子疯了一天. 星巴克猫爪杯,一场已经与猫无关了的"圣杯战争".网上的倒卖价格,已炒至近千元! 求而不得,舍而不能,得而不惜.这是人最大的悲哀.. ...
微信小程序云开发之数据分页云函数
微信小程序云开发之数据分页云函数 2018-10-06 20:23:28 微信小程序的云开发可以自己对数据库进行操作而不需要后台,那么很常见的一个功能就是我们在读取数据的时候需要分页来获取 ...
微信小程序云开发项目实战之商城开发日记 04
今天是愉快开发商城项目的第四天了,相信如果大家跟着我能把前两天的前端内容敲完,相信你是有比较大的收货的. 今天的内容是完成购物车的前端代码. 购物车的设计还是比较常规的UI,展示商品的信息,提供选中按 ...
微信小程序云开发入门（二）-数据库详解
微信小程序云开发入门(二)-数据库详解接上一篇:微信小程序云开发入门(一) 摘要: 因为微信小程序云数据库有点类似传统的关系型数据库,但又有所不同.所以刚入手的时候会有点困扰,经过一段时间的学习和摸 ...
微信小程序云开发快速入门手册-告别切图仔的时刻到了
文章很长,建议先收藏,有充分的时间再学习,没有小程序基础的,也阔以先收藏哦. 本文章会手把手带各位小伙伴入门微信小程序云开发,因为我还不是全栈工程师,所以不是特别清楚前后端分离模式下,后端工程师需 ...

微信小程序云开发实现收藏及收藏页面(带样式布局)

第三个版本修改，应该没问题了

1、点击收藏页面

2、收藏页面获取缓冲数据

微信小程序云开发实现收藏及收藏页面(带样式布局)相关推荐

最新文章

热门文章