tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
737
3m

侧边菜单 xSliderMenu ​

预览

介绍 ​

左边菜单选择，右边内容区域

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-slider-menu/x-slider-menu.uvue

使用 ​

ts

<x-slider-menu></x-slider-menu>

Props 属性 ​

名称说明类型默认值
width宽
string"auto"
height高是必填，不可为auto。
string"100%"
showScrollbar是否显示滚动条
booleanfalse
activeTextColor侧边选中的文字颜色，空值取全局主题
string""
textColor侧边未选中时的文字颜色
string"#888888"
fontSize侧边菜单文字大小
string"16"
itemTextColor选项项目未选中的文字颜色
string"#333333"
itemActiveColor选项项目选中的文字颜色，空值取全局主题
string""
sliderBgColor左侧边栏背景颜色
string"#f5f5f5"
darkSliderBgColor左侧边栏暗黑背景颜色
如果不提供，自动读取全局的backgroundColorContentDark背景色
string""
sliderContentBgColor右内容区域背景颜色
string"white"
darkSliderContentBgColor右内容区域暗黑背景颜色
如果不提供读取sheet窗口的暗黑背景
string""
sliderWidth侧边栏宽
string"100"
list``
Array() : SLIDER_TREE_ITEM_INFO[] => [] as SLIDER_TREE_ITEM_INFO[]
modelValue当前选中项的id数组
string""
showToggleMenu是否允许侧边菜单收起和打开(会在菜单顶部出现一个收缩按钮)
这里需要你的菜单项中提供icon图标,不然收起后左侧就取项目的第一个字符.
booleanfalse
menuPosition菜单位置,left或者right
默认在左侧,不可以动态更改.
string"left"
itemHeight左侧菜单项目的高,默认44,不能为百分比,auto这种
只能是如:'44','44px','88rpx'
string"44"
itemSelectedStyle左侧菜单项目被选中时的style样式对象,可以覆盖默认的样式-
改成自己的设计稿样式.
UTSJSONObject() : UTSJSONObject => ({} as UTSJSONObject)
layoutMode右侧布局模式,=scroll时,右侧为动态循环的scroll-view,item插槽
上方的插槽数据启用,你需要自己在循环内布局内容.如果为default默认就是之前的
模式右侧就是一个空view,内容需要自己写滚动.
default,scroll
string"default"

Events 事件 ​

名称参数说明
changeid: stringindex: number手动切换时触发
update:modelValue--

Slots 插槽 ​

名称说明数据
default默认右边插槽内容height: string
height: string
menuid: string
menuid: string
item左边动态菜单插槽项目item: Object
toggle开启收缩菜单时,显示的顶部菜单指示项目插槽,可过这里可以自定义你自己的关闭和展开的菜单指示样式.opened: Boolean
menu左边动态菜单插槽项目item: Object

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/daohang/slider-menu

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-slider-menu sliderWidth="110" :showToggleMenu="true" :list="list" layout-mode="scroll" v-model="modelvalue"
		:item-selected-style="itemStyle">
		<!-- <template v-slot:menu="{item}">
				<view :style="{
					width:'100%',height:'100%',
					backgroundColor:modelvalue==(item.id)?'red':'white',
					borderLeft:modelvalue==(item.id)?'2px solid yellow':'none'
				}">
					<text :style="{color:modelvalue==(item.id)?'white':'#333333'}">{{item.title}}</text>
				</view>
			</template> -->
		<template v-slot:item="{item}">
			<view style="height: 220px;">
				<view style="height: 20px;"></view>
				<x-sheet height="200" color="info">
					<x-text>{{item.title}}</x-text>
				</x-sheet>
			</view>
		</template>
	</x-slider-menu>

</template>

<script setup lang="ts">
	import { SLIDER_TREE_ITEM_INFO } from "@/uni_modules/tmx-ui/interface.uts"
	import { xConfig, xDate } from "@/uni_modules/tmx-ui"
	const modelvalue = ref("1-3-1")
	const itemStyle = ref(xConfig.dark == 'dark' ? ({ backgroundColor: '#181a1b', border: 'none' } as UTSJSONObject) : ({ backgroundColor: '#ccd8e6', border: 'none' } as UTSJSONObject))
	const list = ref<SLIDER_TREE_ITEM_INFO[]>([
		{ title: '江西省1', id: "1-2-1", icon: 'cloud-fill' } as SLIDER_TREE_ITEM_INFO,
		{ title: '安徽2', id: "1-3-1", icon: 'archive-2-fill' } as SLIDER_TREE_ITEM_INFO,
		{ title: '福建3', id: "1-4-9", icon: 'verified-badge-fill' } as SLIDER_TREE_ITEM_INFO,
		{ title: '北京4', id: "1-5-2", icon: 'attachment-fill' } as SLIDER_TREE_ITEM_INFO,
		{ title: '山东5', id: "1-5-3", icon: 'bar-chart-2-fill' } as SLIDER_TREE_ITEM_INFO,
		{ title: '广东6', id: "1-5-4", icon: 'mail-unread-fill' } as SLIDER_TREE_ITEM_INFO,
		{ title: '深圳7', id: "1-5-5", icon: 'home-4-fill' } as SLIDER_TREE_ITEM_INFO,
		{ title: '广西8', id: "1-5-6", icon: 'global-fill' } as SLIDER_TREE_ITEM_INFO,

		{ title: '江西省9', id: "2-2-1" } as SLIDER_TREE_ITEM_INFO,
		{ title: '安徽10', id: "2-3-1" } as SLIDER_TREE_ITEM_INFO,
		{ title: '福建11', id: "2-4-9" } as SLIDER_TREE_ITEM_INFO,
		{ title: '北京12', id: "2-5-2" } as SLIDER_TREE_ITEM_INFO,
		{ title: '山东13', id: "2-5-3" } as SLIDER_TREE_ITEM_INFO,
		{ title: '广东14', id: "2-5-4" } as SLIDER_TREE_ITEM_INFO,
		{ title: '深圳15', id: "2-5-5" } as SLIDER_TREE_ITEM_INFO,
		{ title: '广西16', id: "2-5-6" } as SLIDER_TREE_ITEM_INFO,

		{ title: '江西省17', id: "3-2-1" } as SLIDER_TREE_ITEM_INFO,
		{ title: '安徽18', id: "3-3-1" } as SLIDER_TREE_ITEM_INFO,
		{ title: '福建19', id: "3-4-9" } as SLIDER_TREE_ITEM_INFO,
		{ title: '北京20', id: "3-5-2" } as SLIDER_TREE_ITEM_INFO,
		{ title: '山东21', id: "3-5-3" } as SLIDER_TREE_ITEM_INFO,
		{ title: '广东22', id: "3-5-4" } as SLIDER_TREE_ITEM_INFO,
		{ title: '深圳23', id: "3-5-5" } as SLIDER_TREE_ITEM_INFO,
		{ title: '广西24', id: "3-5-6" } as SLIDER_TREE_ITEM_INFO
	])
</script>

<style lang="scss">

</style>
最近更新