Sidebar 侧边分类

用于电商商品分类选择、多级导航联动的侧边垂直导航栏控件，支持双向滚动联动（点击左侧平滑定位右侧，滑动右侧自动高亮左侧）、指示条与数字徽章。

---

代码示例

1. 基础侧边导航 (Basic Sidebar)

<template>
  <mu-sidebar
    v-model:active="active"
    :options="categories"
    width="200"
    @change="onChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const active = ref(0)
const categories = ref([
  { name: '热门推荐', badge: 'HOT' },
  { name: '手机数码' },
  { name: '家用电器' }
])

const onChange = (item, index) => {
  console.log('切换侧边分类:', index, item)
}
</script>

---

2. 双向滚动联动电商分类 (Two-Way Scroll Linkage)

结合右侧 <scroll-view> 监听 @scroll 与指定 :scroll-into-view 实现左右双向实时滑动联动。

<template>
  <view class="sidebar-layout">
    <!-- 左侧 Sidebar -->
    <mu-sidebar
      v-model:active="activeSidebar"
      :options="categories"
      width="200"
      @change="onSidebarClick"
    />

    <!-- 右侧 scroll-view -->
    <scroll-view
      scroll-y
      class="sidebar-scroll"
      :scroll-into-view="rightScrollIntoId"
      scroll-with-animation
      @scroll="onRightScroll"
    >
      <view
        v-for="(cat, index) in categories"
        :key="index"
        :id="'cat-section-' + index"
        class="cat-section"
      >
        <text class="category-title">{{ cat.name }}</text>
        <!-- 子分类内容列表 -->
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const activeSidebar = ref(0)
const rightScrollIntoId = ref('')
let isClickScrolling = false

const categories = ref([
  { name: '热门推荐', badge: 'HOT' },
  { name: '手机数码' },
  { name: '家用电器' }
])

// 1. 点击左侧侧边栏 -> 平滑滚动右侧
const onSidebarClick = (item, index) => {
  isClickScrolling = true
  activeSidebar.value = index
  rightScrollIntoId.value = 'cat-section-' + index
  setTimeout(() => { isClickScrolling = false }, 500)
}

// 2. 滚动右侧 -> 自动更新左侧 Sidebar 高亮
const onRightScroll = (e) => {
  if (isClickScrolling) return
  // 计算当前滚动高度对应的分类索引...
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:active / active	当前激活选中的分类索引	Number	-	0
options	分类数据源 (支持字符串数组或对象 [{name, badge, icon}])	Array	-	[]
width	侧边栏宽度 (rpx)	Number | String	-	180
iconSize	分类图标尺寸大小 (rpx)	Number | String	-	36
iconPosition	图标相对文字的位置	String	'left' | 'top'	'left'
activeColor	激活态文字高亮颜色	String	-	''
indicatorColor	左侧高亮立柱指示条颜色	String	-	'#171717'

---

事件说明 (Events)

事件名	说明	回调参数
update:active	v-model:active 双向绑定更新	(index: Number)
change	切换分类项时触发	(item: Object | String, index: Number)