uniapp_more_vue3_h5展开收起组件

一、在 components 中新建 moreCom 文件夹并新建 moreCom.vue文件

1、写入 html 代码

<template>
	<view class="wrap">
		<view ref="moreDom" class="more_wrap" :style="{'height': heights}">
			<view id="moreDom">{{content}}</view>
		</view>
		<view class="pop_wrap" v-if="content">
			<view @click="pop">{{!isPop ? '展开' : '收起'}}</view>
		</view>
	</view>
</template>

2、写入 css 代码

.wrap {
	position: relative;

	.more_wrap {
		width: 100%;
		overflow: hidden;
	}

	.pop_wrap {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: -1rpx;
		width: 100%;
		height: 50rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 1));
	}
}

3、写入 js 代码

import { ref } from 'vue';
const { content, height, isAnimation } = defineProps({
	// 内容
	content: {
		type: String,
		default: ''
	},
	// 默认展示高度
	height: {
		type: Number,
		default: 200
	},
	// 是否开启动画，true --- 开启   false --- 不开启
	isAnimation: {
		type: Boolean,
		default: false
	}
})

const heights = ref('');
const isPop = ref(false);
heights.value = `${height}px`;
// 点击展开收起
const pop = () => {
		isPop.value = !isPop.value;
		if (isPop.value && isAnimation) {
			const query = uni.createSelectorQuery().in(this);
			query.select('#moreDom').boundingClientRect(data => {
				let actHeight = height;
				let time = setInterval(() => {
					let heightAnimation = actHeight++;
					heights.value = heightAnimation + 'px';
					if (actHeight >= data.height + 30) {
						clearInterval(time);
					}
				}, 10)
			}).exec();
		} else if (!isPop.value && isAnimation) {
			const query = uni.createSelectorQuery().in(this);
			query.select('#moreDom').boundingClientRect(data => {
				let actHeight = heights.value.substring(0, 3);
				let time = setInterval(() => {
					let heightAnimation = actHeight--;
					heights.value = heightAnimation + 'px';
					if (actHeight <= height) {
						clearInterval(time);
					}
				}, 10)
			}).exec();
		} else if (isPop.value && !isAnimation) {
			const query = uni.createSelectorQuery().in(this);
			query.select('#moreDom').boundingClientRect(data => {
				heights.value = `${data.height + 30}px`;
			}).exec();
		} else if (!isPop.value && !isAnimation) {
			heights.value = height + 'px';
		}
	}

二、父组件调用

1、html 代码

<more-com :content="content" :height="height" :isAnimation="isAnimation"></more-com>

2、js 代码

import moreCom from '@/components/moreCom/moreCom.vue';
import { ref } from 'vue';
const content = ref(
	'JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。JavaScript的标准是ECMAScript。截至2012年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript 2015，但通常被称为ECMAScript 6或者ES2015。'
	);
const height = ref(210);
const isAnimation = ref(false);

三、效果展示

注：只适用于 h5 ，小程序均不支持