Page (页面)

页面组件，用于定义页面的布局和结构，支持配置导航栏、标签栏、加载状态、加载时间、页面模式等。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page :scrollDisabled="true">
		<t-col main-class='mb-30 dx ov z-999'>
			<t-col main-class='h-330 bit-#ffffff,#04BB62 da dltr-0'></t-col>
			<t-col main-class="ov z-998">
				<t-status-bar></t-status-bar>
				<t-row main-class="tdb mltr-30 faic r-150 pr-20 ov">
					<t-select main-class="z-1 ov r-150" type="p" :modelValue="val" @close="selectchange" size="small"
						:popover-attrs="{placement:'bottom-start',contentClass:'w-200'}" :closeable="false">
						<t-select-option v-for="(item,index) in options" :key="index" :label="item.label"
							:value="item.value"></t-select-option>
					</t-select>
					<t-input main-class="f pl-0" placeholder-style="c-#ccc" effect="plain" v-model="inputVal"
						input-class="s-30" placeholder="请输入组件名称" prefix-icon="search" prefix-class="ats-1.5 ml-10"
						type="s"></t-input>
					<t-button type="success" size="mini" main-class="r-150" @click="onSearch">搜索</t-button>
				</t-row>
			</t-col>
			<t-swiper previousMargin="60" nextMargin="60" :circular="true" :interval="5000" main-class="mt-30" type="p"
				:indicator-dots="true" :vertical="false" :duration="500" :disableTouch="false" :autoplay="true"
				:current="current" :indicatorDots='true' @change="swiperChange">
				<t-swiper-item :main-class="`atp-tr atd-500 fc ${index==current?'ats-1':'ats-0.9'}`"
					v-for="(item,index) in list1" :key="index">
					<t-image main-class="twh-100% tdr" :src="`${item['url']}`" />
				</t-swiper-item>
			</t-swiper>
		</t-col>
		<t-view main-class="tpg ov mb-30">
			<t-row main-class='mlrb-30'>
				<t-col main-class='f mr-30 p-30 tdr tdb' path="/pagesB/tools/tools">
					<t-text main-class='sfwb mb-20 s-35'>组件总数</t-text>
					<t-text>{{comStatistics.all_count}}</t-text>
				</t-col>
				<t-col main-class='f p-30 tdr tdb'>
					<t-text main-class='sfwb mb-20 s-35'>uvue组件</t-text>
					<t-text>{{comStatistics.uvue_count}}</t-text>
				</t-col>
			</t-row>
			<t-row main-class='mlr-30'>
				<t-col main-class='f mr-30 p-30 tdr tdb'>
					<t-text main-class='sfwb mb-20 s-35'>Canvas组件</t-text>
					<t-text>{{comStatistics.canvas_count}}</t-text>
				</t-col>
				<t-col main-class='f p-30 tdr tdb'>
					<t-text main-class='sfwb mb-20 s-35'>原生组件</t-text>
					<t-text>{{comStatistics.native_count}}</t-text>
				</t-col>
			</t-row>
		</t-view>
		<t-list type="p" main-class="f" ref="ins" @scrolltolower="scrolltolower" @refresherrefresh="refresherrefresh"
			:refresher-enabled="false" :loadmore="true">
			<t-list-item v-for='(item,index) in componentList' :key="index">
				<t-row main-class='mlrb-30 pl-30 tdb tdr faic' :hover="true" @click="nvto(`${item['path']}`)">
					<t-text>{{item['tag']}}</t-text>
					<t-text>{{item['name']}}</t-text>
					<t-row main-class="f faic ml-30">
						<t-icon :name="item['icon']" type="s" main-class="f h-90 slh-90 sta-c s-38"></t-icon>
						<t-icon name="thumb-up" type="w" main-class="f h-90 slh-90 sta-c s-38"></t-icon>
						<t-icon name="edit-pen" type="p" main-class="f h-90 slh-90 sta-c s-38" :stop="true"
							@click="editcom(item)"></t-icon>
						<t-icon name="star" type="s" main-class="f h-90 slh-90 sta-c s-38"></t-icon>
						<t-icon name="trash" type="e" @click="remove(item)"
							main-class="f h-90 slh-90 sta-c s-38"></t-icon>
					</t-row>
				</t-row>
			</t-list-item>
		</t-list>
		<t-fab type="s" main-class="db-150 dr-30" :state="true" direction='column-top' spacing="20">
			<t-fab-item :hover="true" path='/pagesA/api/share/share'>
				<t-icon name="zhuanfa" main-class='c-#fff'></t-icon>
				<t-text main-class='c-#fff' size="mini">分享</t-text>
			</t-fab-item>
			<t-fab-item :hover="true" path="/pagesA/template/skintheme/skintheme">
				<t-icon name="moments" size="30" main-class='c-#fff'></t-icon>
				<t-text main-class='c-#fff' size="mini">皮肤</t-text>
			</t-fab-item>
			<t-fab-item :hover="true" path="/pagesB/about/about">
				<t-icon name="weixin-fill" main-class='c-#fff'></t-icon>
				<t-text main-class='c-#fff' size="mini">我们</t-text>
			</t-fab-item>
			<t-fab-item :hover="true" path="/pagesB/im/im">
				<t-icon name="server-fill" main-class='c-#fff'></t-icon>
				<t-text main-class='c-#fff' size="mini">客服</t-text>
			</t-fab-item>
		</t-fab>
	</t-page>
</template>
<script setup>
	import { TuiApi } from '@/api'
	import { TuiSleep, TuiSwiperEvent } from '@/uni_modules/tui-plugins'
	const ins = ref<TListComponentPublicInstance | null>(null)
	const workType = ref<string>('completed')
	const mask = ref(true)
	const cur = ref(1)
	const total = ref(0)
	const pageSize = ref(20)
	const list = ref<UTSJSONObject[]>([])
	const componentList = ref<UTSJSONObject[]>([])
	const sleep = new TuiSleep(1000)
	let loading : boolean = false
	const val = ref<string>('all')
	const inputVal = ref('')
	type SelectOptions = {
		value : string
		label : string
		disabled ?: boolean
	}
	type statisticstype = {
		all_count : number
		uvue_count : number
		canvas_count : number
		native_count : number
	}
	const current = ref(0)
	function swiperChange(e : TuiSwiperEvent) {
		current.value = e.detail.current
	}
	const list1 = [
		{
			url: '/static/banner/introduce.jpg',
			title: '',
			poster: '',
			type: ''
		},
		{
			url: '/static/banner/charts.jpg',
			title: '',
			poster: '',
			type: ''
		}, {
			url: '/static/banner/canvas.jpg',
			title: '',
			poster: '',
			type: ''
		}
	] as UTSJSONObject[]

	const options = ref<SelectOptions[]>([{
		value: 'all',
		label: '全部'
	}, {
		value: 'basics',
		label: '基础组件'
	}, {
		value: 'form',
		label: '表单组件',
		disabled: true
	}, {
		value: 'layout',
		label: '布局组件'
	}, {
		value: 'feedback',
		label: '反馈组件'
	}, {
		value: 'navigation',
		label: '导航组件'
	}, {
		value: 'other',
		label: '其它组件'
	}])
	const comStatistics = ref<statisticstype>({ "all_count": 0, "uvue_count": 0, "canvas_count": 0, "native_count": 0 } as statisticstype)
	TuiApi('componentStatistics', {}, false).then(res => {
		comStatistics.value = JSON.parse<statisticstype>(JSON.stringify(res['data']))!
	})
	function getComponentList() : Promise<UTSJSONObject[]> {
		return new Promise((
			resolve : (rst : UTSJSONObject[]) => void
		) => {
			if (loading) return
			loading = true
			TuiApi('getComponentTest', {
				"devstatus": workType.value,
				"current": cur.value,
				"pageSize": pageSize.value,
				"keyword": inputVal.value,
				"type": val.value
			}, false).then((res : UTSJSONObject) => {
				const lastPage = (res as UTSJSONObject).getBoolean('data.lastPage')!

				sleep.call(() => {
					cur.value++
					loading = false
					if (lastPage) {
						ins.value!.setLoadmore(3)
					} else {
						//设置状态为0会销毁组件，避免loading会在后台运行
						ins.value!.setLoadmore(0)
					}
					nextTick(() => {
						resolve((res as UTSJSONObject).getArray('data.list') as UTSJSONObject[])
					})
				})
			})
		})
	}
	function refresherrefresh() {
		loading = false
		cur.value = 1
		getComponentList().then((data : UTSJSONObject[]) => {
			componentList.value = data
			ins.value!.closerefresher()
		})
	}
	function onSearch() {
		ins.value!.showMask()
		loading = false
		cur.value = 1
		getComponentList().then((data : UTSJSONObject[]) => {
			ins.value!.hideMask()
			nextTick(() => {
				componentList.value = data
				ins.value!.closerefresher()
			})
		})
	}
	function selectchange(e : string) {
		nextTick(() => {
			val.value = e
			onSearch()
		})
	}
	function nvto(url : string) {
		uni.navigateTo({
			url
		})
	}
	function scrolltolower() {
		getComponentList().then((data : UTSJSONObject[]) => {
			componentList.value.push(...data)
		})
	}
	function editcom(item : UTSJSONObject) {
		// const data = encodeURIComponent(JSON.stringify(item))
		// uni.navigateTo({
		// 	url: '/pagesA/template/pool/pool?data=' + data
		// })
	}
	function remove(item : UTSJSONObject) {
		uni.showModal({
			title: `您确定删除【${item['name']}】吗？`,
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '权限不足'
					})
				}
			}
		})
	}
	onUnload(() => {
		sleep.clear()
	})
	onLoad(() => {
		getComponentList().then((data : UTSJSONObject[]) => {
			ins.value!.hideMask()
			componentList.value = data
		})
	})
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
scrollDisabled	Boolean	false	是否禁用滚动，禁用滚动后采用view作为父容器
tabbar	Boolean	true	是否显示底部导航栏
isLoading	Boolean	true	是否显示加载动画
loadingTime	Number	100	加载动画时间
navbar	Boolean	false	是否显示导航栏

事件

名称	返回参数	说明
initFinished	(e:NodeInfo)	组件初始化完成时触发

插槽

名称	返回值	说明
default	-