基于uniapp 选项卡滑动 解决高度不适应 demo

基于uniapp 选项卡滑动 解决高度不适应 demo

使用框架 uview

<template>
	<view>
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="clickTab"></u-tabs>
		<swiper :style="{ height: swiperHeight + 'px' }" class="swiper" :current="currentTab" @change="swiperTab">
			<swiper-item class="swiper-item"><view class="component">121121</view></swiper-item>
			<swiper-item class="swiper-item">
				<view class="component">
					<view v-for="(item, index) in 100">
						<view class="box">12312 -----{{ index }}</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item"><view class="component">asdsadsadsadsDDDDDD</view></swiper-item>
			<swiper-item class="swiper-item"><view class="component">/</view></swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 0,
			swiperHeight: '',
			list: [
				{
					name: '待收货'
				},
				{
					name: '待付款'
				},
				{
					name: '待评价'
				},
				{
					name: '待评价'
				}
			],
			current: 0
		};
	},
	created() {
		this.setSwiperHeight();
	},
	methods: {
	    // 滑动并触发setSwiperHeight()事件
		swiperTab(e) {
			this.currentTab = e.target.current;
			this.current = e.target.current;
			this.setSwiperHeight();
		},
		// 点击tab选项卡切换
		clickTab(e) {
			if (this.currentTab == e) {
				return false;
			} else {
				this.currentTab = e;
				this.current = e;
			}
		},
		setSwiperHeight() {
			let query = uni.createSelectorQuery().in(this);
			query.selectAll('.component').boundingClientRect();
			console.log(query.select('.component'));
			// 官方解释 
			// 返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。
			query.exec(res => {
			    // 获取当前内容数据内容的高度 并赋值
				this.swiperHeight = res[0][this.currentTab].height;
				// console.log(res[0][this.currentTab].height);
				// console.log(res);
			});
		}
	}
};
</script>

<style scoped>
/* 默认赋值 550高度  滑动或点击切换 并重新获取元素内容高度  */
.swiper {
	height: 550px;
	max-width: 100vw;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.swiper-item {
	min-height: 100%;
}
.box {
	width: 100px;
	height: 20px;
	border: 1px solid #000000;
}
</style>

注: 转载与 https://blog.csdn.net/printf_hello/article/details/105298455