TMUI4x

主题

TMUI4x2026-05-27
358
1.5m

引导 xGuid ​

在线预览
在线模拟尺寸:

介绍 ​

内部只可放置x-guid-item。在app上根节点必须是scroll-view或者list-view等可滚动的页面使用。 还要设置容器:scroll-with-animation="false"禁止滚去动画。 且你的元素唯一id必须是容器的直接子节点，否则会无效(安卓会无效，为了所有平台有效，必须是容器的直接第一级子节点)。 您可以参考我的dmeo页面使用，严格按照demo使用！！！

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.87+1.1.21

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-guid/x-guid.uvue

使用 ​

ts

<x-guid></x-guid>

Props 属性 ​

名称说明类型默认值
maskColor``
string'rgba(0,0,0,0.4)'
activeId如果要双向绑定请使用v-model:active-id,您在子组件上定义的target-id属性，且是唯一的
string''
defaultActiveId``
string''

Events 事件 ​

名称参数说明
change-用记点上、下步时的变化
update:activeId-双向同步手动控制，默认可以不配置，如果要自行控制请v-model:activeId
complete-点击完成时触发

Slots 插槽 ​

名称说明数据
default插槽内只可放置x-guid-item-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/daohang/guid

示例源码 ​

uvue
vue
<template>
	<scroll-view style="flex:1" :scroll-into-view="activeId" >

		<x-sheet>
			<x-text font-size="18" class="text-weight-b mb-8">引导 xGuid {{activeId}}</x-text>
			<x-text color="#999999">引导组件，需要定位聚焦的元素必须在页面上不可以在子组件中或者隐藏中，并且必须要设定唯一id标识。</x-text>
		</x-sheet>
		<view style="height:50px"></view>
		<view id="testId1" class="mx-16 mb-16 pa-16">
			<x-text font-size="18" class="text-weight-b mb-8">节点1 testId1</x-text>
			<view>
				<x-text color="#999999">testId1</x-text>
			</view>
		</view>
		<view style="height:200px"></view>
		<view id="testId2" class="mx-16 mb-16 pa-16">
			<x-text font-size="18" class="text-weight-b mb-8">节点2 testId2</x-text>
			<view>
				<x-text color="#999999">testId2</x-text>
			</view>
		</view>
		<view style="height:550px"></view>
		<x-sheet id="testId3">
			<x-text font-size="18" class="text-weight-b mb-8">节点3 testId3</x-text>
			<view >
				<x-text color="#999999">testId3</x-text>
			</view>
		</x-sheet>
		<view style="height:800px"></view>
		<view class="mx-16 mb-16 pa-16" id="testId4">
			<x-text font-size="18" class="text-weight-b mb-8">节点4 testId4</x-text>
			<view class="flex flex-row flex-row-center-end">
				<view >
					<x-text color="#999999">testId4</x-text>
				</view>
			</view>
		</view>
		<view style="height:200px"></view>
		<x-guid v-model:activeId="activeId" defaultActiveId="testId1">
			<x-guid-item v-for="(item,index) in 4" :key="item" :order="index" :targetId="`testId${item}`" :title="`标题${item}`" :content="`testId${item}`"></x-guid-item>
		</x-guid>
	</scroll-view>
</template>

<script lang="ts" setup>
const activeId = ref('')

</script>

<style lang="scss">
</style>
最近更新