低代码高性能原生UI框架Pages
组件类型：UxPagesComponentPublicInstance
需搭配Tabbar组件使用
平台兼容性
UniApp X
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | √ |
UniApp Vue Nvue
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| x | x | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 0 | Slot | 第1个页面插槽 | |
| 1 | Slot | 第2个页面插槽 | |
| 2 | Slot | 第3个页面插槽 | |
| 3 | Slot | 第4个页面插槽 | |
| 4 | Slot | 第5个页面插槽 | |
| index | Number | 0 | 当前页面下标 |
| pages | Number | 0 | 页面数量 |
示例代码
html
<template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :border="false">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-pages :index="tabIndex" :pages="tabs.length">
<template v-slot:0>
<ux-scroll :placeholder="true">
<ux-card direction="column" icon="flag-filled" title="页面组" :bold="true">
<ux-text text="需搭配Tabbar组件使用"></ux-text>
</ux-card>
<view class="page">
<ux-text :text="tabs[0].name" color="black"></ux-text>
</view>
</ux-scroll>
</template>
<template v-slot:1>
<ux-page>
<view class="page">
<ux-text :text="tabs[1].name" color="black"></ux-text>
</view>
</ux-page>
</template>
<template v-slot:2>
<ux-page>
<view class="page">
<ux-text :text="tabs[2].name" color="black"></ux-text>
</view>
</ux-page>
</template>
<template v-slot:3>
<ux-page>
<view class="page">
<ux-text :text="tabs[3].name" color="black"></ux-text>
</view>
</ux-page>
</template>
</ux-pages>
<ux-tabbar anim="water" :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 :stack="showDoc">
<ux-navbar :title="title" :border="false">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-pages :index="tabIndex" :pages="tabs.length">
<template v-slot:0>
<ux-scroll :placeholder="true">
<ux-card direction="column" icon="flag-filled" title="页面组" :bold="true">
<ux-text text="需搭配Tabbar组件使用"></ux-text>
</ux-card>
<view class="page">
<ux-text :text="tabs[0].name" color="black"></ux-text>
</view>
</ux-scroll>
</template>
<template v-slot:1>
<ux-page>
<view class="page">
<ux-text :text="tabs[1].name" color="black"></ux-text>
</view>
</ux-page>
</template>
<template v-slot:2>
<ux-page>
<view class="page">
<ux-text :text="tabs[2].name" color="black"></ux-text>
</view>
</ux-page>
</template>
<template v-slot:3>
<ux-page>
<view class="page">
<ux-text :text="tabs[3].name" color="black"></ux-text>
</view>
</ux-page>
</template>
</ux-pages>
<ux-tabbar anim="water" :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 * as plus from '@/uni_modules/ux-plus'
import { UxTab } from '@/uni_modules/ux-frame'
const title = ref('')
const showAll = ref(false)
const tabIndex = ref(0)
const tabs = [
{
name: '页面1',
selectedIcon: 'signature',
unselectedIcon: 'signature',
unselectedColor: '#333333',
selectedColor: '#c40012',
},{
name: '页面2',
selectedIcon: 'code',
unselectedIcon: 'code',
selectedColor: '#E3a900',
unselectedColor: '#333333',
},
{
name: '页面3',
selectedIcon: 'waves-outline',
unselectedIcon: 'waves-outline',
selectedColor: '#388971',
unselectedColor: '#333333',
badge: 28,
},
{
name: '页面4',
selectedIcon: 'effects-filled',
unselectedIcon: 'effects-filled',
selectedColor: '#118225',
unselectedColor: '#333333',
}
] as UxTab[]
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/pages.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
setTimeout(function() {
showAll.value = true
}, 500);
})
function tabChange(index: number) {
tabIndex.value = index
}
</script><script setup>
import * as plus from '@/uni_modules/ux-plus'
import { UxTab } from '@/uni_modules/ux-frame'
const title = ref('')
const showAll = ref(false)
const tabIndex = ref(0)
const tabs = [
{
name: '页面1',
selectedIcon: 'signature',
unselectedIcon: 'signature',
unselectedColor: '#333333',
selectedColor: '#c40012',
},{
name: '页面2',
selectedIcon: 'code',
unselectedIcon: 'code',
selectedColor: '#E3a900',
unselectedColor: '#333333',
},
{
name: '页面3',
selectedIcon: 'waves-outline',
unselectedIcon: 'waves-outline',
selectedColor: '#388971',
unselectedColor: '#333333',
badge: 28,
},
{
name: '页面4',
selectedIcon: 'effects-filled',
unselectedIcon: 'effects-filled',
selectedColor: '#118225',
unselectedColor: '#333333',
}
] as UxTab[]
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/pages.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
setTimeout(function() {
showAll.value = true
}, 500);
})
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>