t-slider-menu

SliderMenu 侧边分类

组件介绍

t-slider-menu 是侧边分类联动组件，左侧虚拟滚动渲染分类菜单，右侧 list-view 渲染内容列表。点击左侧菜单切换到对应内容，右侧滚动时左侧高亮同步跟随。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

通过 list 属性传入分类数据，使用 #default 插槽自定义右侧内容。

<template>
  <t-slider-menu :list="list">
    <template #default="{item}">
      <view class="p-10">
        <text>{{(item as UTSJSONObject).title}}</text>
      </view>
    </template>
  </t-slider-menu>
</template>

<script setup>
const list = ref<UTSJSONObject[]>([
  { title: '分类1', data: ['商品1', '商品2'] },
  { title: '分类2', data: ['商品3', '商品4'] }
])
</script>

Props

属性名	说明	类型	默认值
list	分类数据列表	any[]	[]
current	当前选中索引（受控模式）	number	0
virtualRowHeight	左侧菜单行高	number	45
titleKey	标题显示字段 key	string	'title'
path	点击跳转路径	string	''
hover	点击效果	boolean	false
type	主题类型	string	'primary'
disabled	是否禁用	boolean	false
effect	显示主题	string	''
size	组件尺寸	string	'medium'

Slots

插槽名	说明	作用域参数
#default	右侧内容区域	{ item, index } - item 为当前分类数据，index 为索引

Events

事件名	说明	回调参数
change	左侧菜单点击或右侧滚动切换分类时触发	index: number
scroll	右侧列表滚动时触发	event: UniScrollEvent

使用示例

完整示例参考 demo/slider-menu/slider-menu.uvue。