more_vue2展开收起组件

博主： renlmingj
发布时间：2024 年 06 月 04 日
203 次浏览
暂无评论
3009字数
分类： uniapp_v2

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

###### 1、写入 html 代码

```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 代码

```scss
.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 代码

```js
export default {
	name: "moreCom",
	props: {
        // 内容
		content: {
			type: String,
			default: ''
		},
        // 默认展示高度
		height: {
			type: Number,
			default: 200
		},
        // 是否开启动画，true --- 开启   false --- 不开启
		isAnimation: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			heights: '',
			isPop: false,
		};
	},
	mounted() {
		this.heights = `${this.height}px`;
	},
	methods: {
		// 点击展开收起
		pop() {
			this.isPop = !this.isPop;
			if (this.isPop && this.isAnimation) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#moreDom').boundingClientRect(data => {
					let actHeight = this.height;
					let time = setInterval(() => {
						let heightAnimation = actHeight++;
						this.heights = heightAnimation + 'px';
						if (actHeight >= data.height + 30) {
							clearInterval(time);
						}
					}, 10)
				}).exec();
			} else if (!this.isPop && this.isAnimation) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#moreDom').boundingClientRect(data => {
					let actHeight = this.heights.substring(0, 3);
					let time = setInterval(() => {
						let heightAnimation = actHeight--;
						this.heights = heightAnimation + 'px';
						if (actHeight <= this.height) {
							clearInterval(time);
						}
					}, 10)
				}).exec();
			} else if (this.isPop && !this.isAnimation) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#moreDom').boundingClientRect(data => {
					this.heights = `${data.height + 30}px`;
				}).exec();
			} else if (!this.isPop && !this.isAnimation) {
				console.log('收起',this.height);
				this.heights = this.height + 'px';
			}
		},
	},
}
```

##### 二、父组件调用

###### 1、html 代码

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

###### 2、js 代码

```js
import moreCom from '@/components/moreCom/moreCom.vue';
export default {
	data() {
		return {
			content: '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。',
			height: 210,
			isAnimation: false
		};
	},
	components: {
		moreCom
	},
}
```

##### 三、效果展示

![收起效果图][1]
![展开效果图][2]

[1]: https://www.renlmingj.cn/usr/uploads/2024/06/2541820869.png
  [2]: https://www.renlmingj.cn/usr/uploads/2024/06/2111840672.png

最后修改：2024 年 06 月 13 日