你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

导航组件

侧边菜单 TmSliderMenu

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

🌶️ 示例

查看模拟效果－

示例模板

<template>
	<view class="flex-1 flex flex-col" style="height: 100%;">
		<tm-sheet>
			<tm-text font-size="36" class="text-weight-b mb-16 d-block">侧边菜单 TmSliderMenu</tm-text>
			<view>
				<tm-text>方便侧边菜单右边内容管理，示例写了个双向定位展示的样板，方便大家复制直接使用。样式非常灵活，可以任意定制你想要的格式，也兼容PC端</tm-text>
			</view>
		</tm-sheet>
		<view class="flex-1 mx-n6 round-4 overflow">
			<tm-slider-menu
				v-model="defaultSelected"
				height="100%"
				:list='list'
				slider-bg-color="#efefef"
				:menuSelectedStyle="{
					backgroundColor:'#ffffff',
					borderLeft:'none',
					fontWeight:'bold'
				}"
			>
				<template v-slot:default="{item}">
					<view class="sticky t-0 l-0 fulled px-20 white flex flex-row flex-row-center-start text-weight-b"
						  style="height: 88rpx;background-color: white;">
						<tm-text font-size="32">#{{item.id}}{{item.title}}</tm-text>
					</view>
					<view class="px-20 white flex flex-wrap flex-row gap-10">
						<view class="flex-shrink flex flex-center"
							  style="height:120px;width:calc(33% - 20rpx);background-color: #f5f5f5;"
							  v-for="(item2,index2) in 8" :key="index2">
							{{item2}}
						</view>
					</view>
				</template>

			</tm-slider-menu>
		</view>
	</view>

</template>
<script setup lang="ts">
import { ref } from "vue"
const defaultSelected = ref(2)
const list = ref([
	{ id: 1, title: "水果" },
	{ id: 2, title: "蔬菜" },
	{ id: 3, title: "肉类" },
	{ id: 4, title: "海鲜" },
	{ id: 5, title: "酒水" },
	{ id: 6, title: "饮料" },
	{ id: 7, title: "零食" },
	{ id: 8, title: "水果" },
	{ id: 9, title: "蔬菜" },
	{ id: 10, title: "肉类" },
	{ id: 11, title: "海鲜" },
	{ id: 12, title: "酒水" },
	{ id: 13, title: "饮料" },
	{ id: 14, title: "零食" },
	{ id: 15, title: "水果" },
])
</script>

<style lang="scss">
page,
body,
html {
	height: 100%;
	display: flex;
	flex-direction: column;
}
</style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
width	string|number	"auto"	宽
height	string|number	"100%"	高是必填，不可为auto。
showScrollbar	boolean	true	是否显示滚动条
activeTextColor	string	""	侧边选中的文字颜色，空值取全局主题
textColor	string	"#888888"	侧边未选中时的文字颜色
fontSize	string	"30"	侧边菜单文字大小
itemTextColor	string	"#333333"	选项项目未选中的文字颜色
itemActiveColor	string	""	选项项目选中的文字颜色，空值取全局主题
sliderBgColor	string	"#f5f5f5"	左侧边栏背景颜色
darkSliderBgColor	string	""	左侧边栏暗黑背景颜色如果不提供，自动读取全局的backgroundColorContentDark背景色
sliderContentBgColor	string	"white"	右内容区域背景颜色
darkSliderContentBgColor	string	""	右内容区域暗黑背景颜色如果不提供读取sheet窗口的暗黑背景
sliderWidth	string|number	"190"	侧边栏宽
list	Array<Record<string, any>>	()=>[]asArray<Record<string,any>>	-
modelValue	string|number	""	当前选中项的id
rangKey	string	'title'	文本显示的字段
rangId	string	'id'	标识id的字段
menuSelectedStyle	Partial<CSSStyleDeclaration>	()=>{return	-

🌹 事件

事件名	参数	返回数据	描述
change	名称：id,当前选中的菜单id,名称：index,当前选中的菜单索引,	-	手动切换时触发
update:modelValue	-	-	-

🌽 slot插槽

插槽名	数据	描述
menu	名称：binding,item 类型：Record<string,any
动态循环菜单项目插槽
default	名称：binding,item 类型：Record<string,any
动态循环list插槽

🥗 ref方法

方法名	参数	返回值	描述