Tui Plus Vapor

Appearance

t-async-height ​

AsyncHeight 异步高度

t-async-height 组件介绍 ​

t-async-height 用于在相同分组内保持多个组件高度一致，自动同步组内最大高度。适用于卡片列表、网格布局等需要保持高度统一的场景。

t-async-height 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-async-height 基础用法 ​

基础用法参考 demo/async-height/async-height.uvue，通过 group 属性将需要同步高度的组件分组。

vue
<template>
	<view class="p-15">
		<t-card class="r-10 mb-15" title='AsyncHeight' subTitle="不同区域，相同分组的高度会保持同步。"></t-card>
		<view class="mb-15">
			<t-async-height group="group1" class="b-1px,s,#ccc mb-15 r-10 p-10 bg-#fff">
				<text>分组1</text>
			</t-async-height>
			<t-async-height group="group2" class="b-1px,s,#ccc mb-15 r-10 p-10 bg-#fff">
				<text>分组2</text>
				<text>分组2</text>
			</t-async-height>
		</view>
		<view class="mb-15">
			<t-async-height group="group1" class="b-1px,s,#ccc mb-15 r-10 p-10 bg-#fff">
				<text>分组1</text>
				<text>相同的分组高度会保持一致</text>
				<text>相同的分组高度会保持一致</text>
				<text>相同的分组高度会保持一致</text>
			</t-async-height>
			<t-async-height group="group2" class="b-1px,s,#ccc mb-15 r-10 p-10 bg-#fff">
				<text>分组2</text>
				<text>分组2</text>
				<text>分组2</text>
				<text>分组2</text>
				<text>分组2</text>
				<text>分组2</text>
				<text>分组2</text>
			</t-async-height>
		</view>
	</view>
</template>

t-async-height Props ​

属性名说明类型默认值
path点击组件后跳转的页面路径；为空时仅响应事件string''
hover是否启用点击效果booleantrue
type组件主题类型，可选 info、primary、error、warning、successstring''
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring'normal'
size组件尺寸，可选 large、medium、small、ministring'mini'
group分组标识，相同 group 的组件会同步高度string''

t-async-height Events ​

事件名说明回调参数
click点击时触发-
transitionend动画结束时触发-
initFinished组件初始化完成时触发，返回组件节点信息NodeInfo
touchstart触摸开始时触发-
touchend触摸结束时触发-
touchmove触摸移动时触发-
touchcancel触摸取消时触发-

t-async-height Slots ​

插槽名说明
default需要同步高度的内容