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

àì夳堔傛蜴生んèń 2021-09-02 09:18 1407阅读 0赞

# 前言 #

# 一、uniapp小程序收藏功能 #

### 思路分析： ###

1.  父组件引入子组件.并且父组件通过属性绑定向子组件传递数据
2.  子组件利用props来接收父组件传来的值，并且进行数据数据初始化赋值
3.  子组件利用属性绑定，根据当前的type值来显示已收藏还是未收藏
4.  点击收藏，切换状态，并且调用更新数据接口
5.  在更新数据接口里面，通过 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值来显示已收藏还是未收藏 #####

<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_ https_ext.dcloud.net.cn_plugin_id_2183]

代码如下（示例）：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]

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

[icons_ https_ext.dcloud.net.cn_plugin_id_2183]: https://ext.dcloud.net.cn/plugin?id=2183
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/e7c95f863be74a629b3762828c42bf34.png
[20201012141835768.png_pic_center]: /images/20210813/eaa5185e9e2e4fe59c815d5042074e28.png