⼩程序云开发实现收藏及收藏页⾯（带样式布局）第三个版本修改，应该没问题了
没到完整的教程，⾃⼰琢磨着做了⼀个
⼀开始尝试⽤缓存数组做，但是⼀直搞不定取消收藏时删除对应的缓存数组数据，于是放弃。
⼜采⽤了数据库的⽅法，但是因为我收藏的不同表太多，⼜转⽤缓存来做
废话不多说，直接上代码
1、点击收藏页⾯
点击收藏，弹窗提⽰收藏成功；反之提⽰取消收藏
.wxml 这⾥贴出收藏按钮，不贴出全部布局
<view class="animal_collect">
<block if="{{isShow==false}}">
<text bindtap="handleCollect"data-id="{{item.name_id}}"class="iconfont icon-shoucang"></text>
</block>
<block 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
})
// 换成⾃⼰的数据库在页⾯渲染
.where({
name_id:id
})
.
get()
.then(res=>{
this.setData({
nameList:res.data
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].isShow
this.setData({
isShow
})
}
}
},
//收藏按钮
handleCollect(e){
//取反
let isShow =!this.data.isShow
this.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.dataset
console.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(p)
wx.setStorageSync("collect_news",collect)
}else{
//如果缓存中已经存在收藏⽂章编号，则将isShow取反
//删掉缓存中指定数组可将下⾯这句改为 collect.splice(index,1);
collect[index].isShow=!collect[index].isShow
wx.setStorageSync("collect_news",collect)
}
//提⽰⽤户
wx.showToast({
title: isShow ?'收藏成功':'取消收藏',
icon:'success'
})
},
2、收藏页⾯获取缓冲数据
这是我做出来的页⾯效果
这是我的缓存数组数据
当缓存数组中isShow=true时显⽰
.wxml
<view class="first_tab">
<!--过滤将收藏显⽰-->写文章的小程序
<block
for="{{collect}}"
if="{{item.isShow===true}}">
<navigator class="animal_item"
key="cat_type"
for-item="item"
data-id="{{item.id}}"
bindtap="handleGoDetail">
<!-- 图⽚容器 -->
<view class="animal_img_wrap">
<image class="animal_img"src="{{item.src?item.src:'dss0.bdstatic/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, })
}
})
)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。