侧边导航（sidebar） | 小程序开发框架

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

# 引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-sidebar": "/miniprogram_npm/m-ui/mx-sidebar/index",
  "mx-sidebar-item": "/miniprogram_npm/m-ui/mx-sidebar-item/index"
}

# 小程序码

可使用微信扫码查看小程序码

#

# 代码演示

# 基本用法

通过在mx-sidebar上设置activeKey属性来控制选中项。

<mx-sidebar active-key="{{ activeKey }}">
  <mx-sidebar-item title="标签名" />
  <mx-sidebar-item title="标签名" />
  <mx-sidebar-item title="标签名" />
</mx-sidebar>

Page({
  data: {
    activeKey: 0,
  },
});

# 徽标提示

设置dot属性后，会在右上角展示一个小红点。设置badge属性后，会在右上角展示相应的徽标。

<mx-sidebar active-key="{{ activeKey }}">
  <mx-sidebar-item title="标签名" dot />
  <mx-sidebar-item title="标签名" badge="5" />
  <mx-sidebar-item title="标签名" badge="99+" />
</mx-sidebar>

# 禁用选项

通过disabled属性禁用选项。

 <mx-sidebar active-key="{{ activeKey }}">
  <mx-sidebar-item title="标签名" />
  <mx-sidebar-item title="标签名" disabled />
  <mx-sidebar-item title="标签名" />
</mx-sidebar>

# 自定义颜色

通过disabled属性禁用选项。

 <mx-sidebar active-key="{{ activeKey }}">
  <mx-sidebar-item select-color="red" title="标签名" />
   <mx-sidebar-item select-color="red" title="标签名" />
</mx-sidebar>

# 监听切换事件

设置change方法来监听切换导航项时的事件。

<mx-sidebar active-key="{{ activeKey }}" bind:change="onChange">
  <mx-sidebar-item title="标签名 1" />
  <mx-sidebar-item title="标签名 2" />
  <mx-sidebar-item title="标签名 3" />
</mx-sidebar>

Page({
  data: {
    activeKey: 0,
  },

  onChange(event) {
   wx.showToast({
      icon: 'none',
      title: `切换至第${event.detail}项`,
    })
  },
});

# API

参数	说明	类型	默认值
`activeKey`	选中项的索引	string,number	`0`

事件名	说明	参数
`bind:change`	切换徽章时触发	当前选中徽章的索引

名称	说明
`custom-class`	根节点样式类

# SidebarItem Props

参数	说明	类型	默认值
`select-color`	选中标签颜色	string	`#333333`
`title`	内容	string	`''`
`dot`	是否显示右上角小红点	boolean	`false`
`badge`	图标右上角徽标的内容	string,number	`''`
`disabled`	是否禁用该项	boolean	`false`

# SidebarItem 外部样式类

名称	说明
`custom-class`	根节点样式类

# SidebarItem Slot

名称	说明
`title`	自定义标题栏，如果设置了title属性则不生效

# SidebarItem Event

事件名	说明	参数
`bind:click`	点击徽章时触发	event.detail 为当前徽章的索引

← 底部导航栏（tabbar）标签页（tab） →

# mx-sidebar 侧边导航