低代码高性能原生UI框架

Appearance

本页导读

Pages 页面组 ​

组件类型：UxPagesComponentPublicInstance

页面组 需搭配Tabbar组件使用

平台兼容性 ​

AndroidiOSweb鸿蒙 Next小程序
√√√xx

Slots ​

名称说明
0第1个页面插槽
1第2个页面插槽
2第3个页面插槽
3第4个页面插槽
4第5个页面插槽

Props ​

属性名类型默认值说明
indexNumber0当前页面下标
pagesNumber0页面数量

示例代码 ​

html
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-pages :index="tabIndex" :pages="tabs.length">
			<template v-slot:0>
				<ux-page>
					<ux-card direction="column" icon="flag" title="页面组" :bold="true">
						<ux-text text="需搭配Tabbar组件使用"></ux-text>
						<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
							<ux-text text="详细文档："></ux-text>
							<ux-text style="flex: 1" name="页面组" text="https://www.uxframe.cn/component/layout/pages.html" mode="link"></ux-text>
						</ux-row>
					</ux-card>
				</ux-page>
			</template>
			
			<template v-slot:1>
				<ux-page :colors="['#136550', '#336550', '#536550']">
					<view class="page">
						<ux-text :text="tabs[1].name" color="white"></ux-text>
					</view>
				</ux-page>
			</template>
			
			<template v-slot:2>
				<ux-page :colors="['#f1a136']">
					<view class="page">
						<ux-text :text="tabs[2].name" color="white"></ux-text>
					</view>
				</ux-page>
			</template>
			
			<template v-slot:3>
				<ux-page backgroundImage="/static/bg.png">
					<view class="page">
						<ux-text :text="tabs[3].name" color="black"></ux-text>
					</view>
				</ux-page>
			</template>
		</ux-pages>
		
		<ux-tabbar type="special" :data="tabs" @change="tabChange">
			<template #center>
				<ux-icon type="plus" color="black" :size="30"></ux-icon>
			</template>
		</ux-tabbar>
	</ux-page>
</template>
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-pages :index="tabIndex" :pages="tabs.length">
			<template v-slot:0>
				<ux-page>
					<ux-card direction="column" icon="flag" title="页面组" :bold="true">
						<ux-text text="需搭配Tabbar组件使用"></ux-text>
						<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
							<ux-text text="详细文档："></ux-text>
							<ux-text style="flex: 1" name="页面组" text="https://www.uxframe.cn/component/layout/pages.html" mode="link"></ux-text>
						</ux-row>
					</ux-card>
				</ux-page>
			</template>
			
			<template v-slot:1>
				<ux-page :colors="['#136550', '#336550', '#536550']">
					<view class="page">
						<ux-text :text="tabs[1].name" color="white"></ux-text>
					</view>
				</ux-page>
			</template>
			
			<template v-slot:2>
				<ux-page :colors="['#f1a136']">
					<view class="page">
						<ux-text :text="tabs[2].name" color="white"></ux-text>
					</view>
				</ux-page>
			</template>
			
			<template v-slot:3>
				<ux-page backgroundImage="/static/bg.png">
					<view class="page">
						<ux-text :text="tabs[3].name" color="black"></ux-text>
					</view>
				</ux-page>
			</template>
		</ux-pages>
		
		<ux-tabbar type="special" :data="tabs" @change="tabChange">
			<template #center>
				<ux-icon type="plus" color="black" :size="30"></ux-icon>
			</template>
		</ux-tabbar>
	</ux-page>
</template>
ts
<script setup>
	import { UxTab } from '@/uni_modules/ux-frame/libs/types/types.uts'
	
	let title = ''
	const tabIndex = ref(0)
	const tabs = [
		{
			name: '页面1',
			selectedIcon: 'happy',
			unselectedIcon: 'happy',
			selectedColor: '#c40012',
		},{
			name: '页面2',
			selectedIcon: 'devil',
			unselectedIcon: 'devil',
			selectedColor: '#365111',
		},
		{
			name: '页面3',
			selectedIcon: 'wink',
			unselectedIcon: 'wink',
			selectedColor: '#f1a136',
			badge: 28,
		},
		{
			name: '页面4',
			selectedIcon: 'angry',
			unselectedIcon: 'angry',
			selectedColor: '#365111',
		}
	] as UxTab[]
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function tabChange(index: number) {
		tabIndex.value = index
	}
</script>
<script setup>
	import { UxTab } from '@/uni_modules/ux-frame/libs/types/types.uts'
	
	let title = ''
	const tabIndex = ref(0)
	const tabs = [
		{
			name: '页面1',
			selectedIcon: 'happy',
			unselectedIcon: 'happy',
			selectedColor: '#c40012',
		},{
			name: '页面2',
			selectedIcon: 'devil',
			unselectedIcon: 'devil',
			selectedColor: '#365111',
		},
		{
			name: '页面3',
			selectedIcon: 'wink',
			unselectedIcon: 'wink',
			selectedColor: '#f1a136',
			badge: 28,
		},
		{
			name: '页面4',
			selectedIcon: 'angry',
			unselectedIcon: 'angry',
			selectedColor: '#365111',
		}
	] as UxTab[]
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function tabChange(index: number) {
		tabIndex.value = index
	}
</script>
css
<style lang="scss">
	.page {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<style lang="scss">
	.page {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>