全屏选项卡

布局介绍

全屏选项卡经常被应用在项目的入口页面，一般使用切换导航+轮播组件实现，uxui 为您提供了基础布局，请掌握布局原理，然后灵活运用。

竖向铺满屏幕原理

布局元素从最外层到内部核心布局组件均使用 flex:1 样式，使核心布局元素竖向铺满屏幕；

运行截图

布局代码

<template>
	<view class="ux-flex1">
		<view class="ux-body ux-mt">
			<ux-switch-navigation 
			:items="navItems" 
			:size="180" 
			:is-center="true"
			text-align="center" 
			active-direction="center" 
			activeLineWidth="88rpx" 
			active-line-height="2rpx" 
			:current-index="currentIndex" 
			@change="navChange"></ux-switch-navigation>
		</view>
		<view class="ux-bg-white ux-mt-small ux-flex1">
			<!-- 局部选项卡 使用 切换导航 + swiper 实现 -->
			<swiper 
			class="ux-flex1" 
			:current="currentIndex" 
			@change="swiperChange">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item 
				v-for="(_, index) in navItems"
				class="ux-flex1">
					<scroll-view 
					:show-scrollbar="true"
					class="scroll-view ux-flex1">
						<view 
						v-for="i in 20" 
						class="content-item">
							<text 
							class="demo ux-text-center ux-color-grey3 ux-text-small ux-bg-grey6">item-{{index}}-{{i}}</text>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script lang="uts">
import {UXNavItem} from "@/uni_modules/unix-ui/uxts/classes.uts";
export default {
	data() {
		return {
			navItems : [
				new UXNavItem(0, '标签名称', 0),
				new UXNavItem(1, '标签名称', 0),
				new UXNavItem(2, '标签名称', 0),
			] as UXNavItem[],
			// 当前索引
			currentIndex : 0
		}
	},
	methods: {
		navChange : function(index:number){
			this.currentIndex = index;
		},
		swiperChange : function(e:SwiperChangeEvent){
			this.currentIndex = e.detail.current;
		}
	}
}
</script>
<style scoped>
.demo{margin:30rpx; padding:80rpx;}
</style>