uniapp 收藏功能实现及组件封装

前言

一、uniapp小程序收藏功能

思路分析：

1. 父组件引入子组件.并且父组件通过属性绑定向子组件传递数据
2. 子组件利用props来接收父组件传来的值，并且进行数据数据初始化赋值
3. 子组件利用属性绑定，根据当前的type值来显示已收藏还是未收藏
4. 点击收藏，切换状态，并且调用更新数据接口
5. 在更新数据接口里面，通过 uni.showLoading() uni.hideLoading() uni.showToast({
   title:this.like?‘收藏成功’:‘取消收藏’,
   icon:‘none’
   })
   来切换状态

1 父组件向子组件传值

<likes :item="item"></likes>

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值来显示已收藏还是未收藏

<uni-icons size="20" color="#f07373" :type="like?'heart-filled':'heart'"></uni-icons>

点击收藏，切换状态，并且调用更新数据接口

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()
				})
			}

完整收藏组件

<template>
	<view class="icons" @click.stop="likeTap">
		<uni-icons size="20" color="#f07373" :type="like?'heart-filled':'heart'"></uni-icons>
	</view>
</template>

<script>
	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()
				})
			}
		}
	}
</script>

<style>
	.icons {
		position: absolute;
		right: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20px;
		height: 20px;
	}
</style>

使用步骤

引入uniapp中的icons

下载icons插件 https://ext.dcloud.net.cn/plugin?id=2183

代码如下（示例）：

在项目里新建一个icons 文件，将icons.js 和 icons.vue导入文件(原因是文件名和文件一致符合easyCom规范，不用导入，注册组件，直接用即可).我这里是都改成了uni-icons