uniapp 收藏功能实现及组件封装 |
您所在的位置：网站首页 › 添加我的收藏 › uniapp 收藏功能实现及组件封装 |
uniapp 收藏功能实现及组件封装
|
前言
一、uniapp小程序收藏功能
思路分析：
父组件引入子组件.并且父组件通过属性绑定向子组件传递数据子组件利用props来接收父组件传来的值，并且进行数据数据初始化赋值子组件利用属性绑定，根据当前的type值来显示已收藏还是未收藏点击收藏，切换状态，并且调用更新数据接口在更新数据接口里面，通过 uni.showLoading() uni.hideLoading() uni.showToast({ title:this.like?‘收藏成功’:‘取消收藏’, icon:‘none’ }) 来切换状态
1 父组件向子组件传值
2 子组件接收到值，将数据初始化
props: {
item: {
type: Object,
default () {
return {}
}
}
},
data() {
return {
like: false
};
},
watch: {
item(newVal) {
this.like = this.item.is_like
}
},
created() {
this.like = this.item.is_like
},
子组件利用属性绑定，根据当前的type值来显示已收藏还是未收藏
点击收藏，切换状态，并且调用更新数据接口
methods: {
likeTap() {
this.like = !this.like
this.setUpdateLikes()
console.log('收藏成功');
},
setUpdateLikes() {
uni.showLoading()
console.log(111)
this.$api.update_like({
user_id: '5e76254858d922004d6c9cdc',
article_id: this.item._id
}).then(res => {
console.log(111)
uni.hideLoading()
console.log('是否', this.like)
uni.showToast({
title:this.like?'收藏成功':'取消收藏',
icon:'none'
})
console.log(res);
}).catch(()=>{
uni.hideLoading()
})
}
完整收藏组件 export default { props: { item: { type: Object, default () { return {} } } }, data() { return { like: false }; }, watch: { item(newVal) { this.like = this.item.is_like } }, created() { this.like = this.item.is_like }, methods: { likeTap() { this.like = !this.like this.setUpdateLikes() console.log('收藏成功'); }, setUpdateLikes() { uni.showLoading() console.log(111) this.$api.update_like({ user_id: '5e76254858d922004d6c9cdc', article_id: this.item._id }).then(res => { console.log(111) uni.hideLoading() console.log('是否', this.like) uni.showToast({ title:this.like?'收藏成功':'取消收藏', icon:'none' }) console.log(res); }).catch(()=>{ uni.hideLoading() }) } } } .icons { position: absolute; right: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; } 使用步骤 引入uniapp中的icons下载icons插件 https://ext.dcloud.net.cn/plugin?id=2183 代码如下（示例）：
|
在项目里新建一个icons 文件，将icons.js 和 icons.vue导入文件(原因是文件名和文件一致符合easyCom规范，不用导入，注册组件，直接用即可).我这里是都改成了uni-icons【本文地址】