组件

状态栏

<template>
	<view class="status-bar" :style="{ height: statusBarHeight + 'px', marginBottom: distance + 'px' }"></view>
</template>

<script>
export default {
	name: 'StatusBar',
	data() {
		return {
			statusBarHeight: 0,
			distance: 0,
		};
	},
	mounted() {
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const windowInfo = uni.getWindowInfo();
		this.statusBarHeight = windowInfo.statusBarHeight;
		const menuTop = menuButtonInfo.top;
		// 距离顶部的间距
		this.distance = menuTop - this.statusBarHeight;
	},
};
</script>

<style lang="scss" scoped>
.status-bar {
	width: 100%;
}
</style>

Swiper

<template>
	<view>
		<NavList :value="current_nav" @change="changeNavBar">
			<NavBarItem v-for="item in list_nav" :key="item.text" :text="$translate(item.text)" />
		</NavList>
		<view class="content-container">
			<swiper class="swiper" :current="current_nav" @change="handleSwiperChange" :duration="300">
				<swiper-item>
					<scroll-view scroll-y class="scroll-view">
						<!-- 展示页面内容 -->
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y class="scroll-view">
						<!-- 展示页面内容 -->
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
import NavList from '@/components/Layout/NavList.vue';
import NavBarItem from '@/components/Layout/NavBarItem.vue';

export default {
	components: {
		NavBarItem,
		NavList,
	},
	data() {
		return {
			list_nav: [{ text: 'tab1' }, { text: 'tab2' }],
			current_nav: 0,
		};
	},
	methods: {
		changeNavBar(index) {
			this.current_nav = index;
		},
		handleSwiperChange(e) {
			this.current_nav = e.detail.current;
		},
	},
};
</script>

<style lang="scss">
.content-container {
	flex: 1;
	width: 100%;
	overflow: hidden;
}

.swiper {
	width: 100%;
	height: 100%;
}

.scroll-view {
	height: 100%;
	box-sizing: border-box;
}
</style>