mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
rex
GitHub
parent
eb586dda23
commit
0f88540533
@ -1,10 +1,11 @@
|
||||
import Page from '../../common/page';
|
||||
import Notify from '../../dist/notify/notify';
|
||||
|
||||
Page({
|
||||
onChange(event) {
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: `切换至第${event.detail}项`
|
||||
Notify({
|
||||
type: 'primary',
|
||||
message: `切换至第${event.detail}项`
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,28 +1,39 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-sidebar custom-class="custom-sidebar" bind:change="onChange">
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
</van-sidebar>
|
||||
</demo-block>
|
||||
<van-grid column-num="{{ 2 }}" border="{{ false }}">
|
||||
<van-grid-item use-slot>
|
||||
<h3 class="demo-sidebar-title">基础用法</h3>
|
||||
<van-sidebar custom-class="custom-sidebar">
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
</van-sidebar>
|
||||
</van-grid-item>
|
||||
|
||||
<demo-block title="显示徽标">
|
||||
<van-sidebar custom-class="custom-sidebar" bind:change="onChange">
|
||||
<van-sidebar-item title="标签名称" dot />
|
||||
<van-sidebar-item title="标签名称" info="5" />
|
||||
<van-sidebar-item title="标签名称" info="99+" />
|
||||
</van-sidebar>
|
||||
</demo-block>
|
||||
<van-grid-item use-slot>
|
||||
<h3 class="demo-sidebar-title">徽标提示</h3>
|
||||
<van-sidebar custom-class="custom-sidebar">
|
||||
<van-sidebar-item title="标签名称" dot />
|
||||
<van-sidebar-item title="标签名称" info="5" />
|
||||
<van-sidebar-item title="标签名称" info="99+" />
|
||||
</van-sidebar>
|
||||
</van-grid-item>
|
||||
|
||||
<demo-block title="自定义标题" class="custom-sidebar-slot">
|
||||
<van-sidebar custom-class="custom-sidebar" bind:change="onChange">
|
||||
<van-sidebar-item info="5">
|
||||
<view slot="title">
|
||||
<van-icon name="wap-home-o" />
|
||||
标签名称
|
||||
</view>
|
||||
</van-sidebar-item>
|
||||
<van-sidebar-item title="标签名称" info="5" />
|
||||
<van-sidebar-item title="标签名称" info="99+" />
|
||||
</van-sidebar>
|
||||
</demo-block>
|
||||
<van-grid-item use-slot>
|
||||
<h3 class="demo-sidebar-title">禁用选项</h3>
|
||||
<van-sidebar custom-class="custom-sidebar">
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" disabled />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
</van-sidebar>
|
||||
</van-grid-item>
|
||||
|
||||
<van-grid-item use-slot>
|
||||
<h3 class="demo-sidebar-title">监听切换事件</h3>
|
||||
<van-sidebar custom-class="custom-sidebar" bind:change="onChange">
|
||||
<van-sidebar-item title="标签名称1" />
|
||||
<van-sidebar-item title="标签名称2" />
|
||||
<van-sidebar-item title="标签名称3" />
|
||||
</van-sidebar>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
|
||||
<van-notify id="van-notify" />
|
||||
|
||||
@ -3,9 +3,16 @@ page {
|
||||
}
|
||||
|
||||
.custom-sidebar {
|
||||
margin-left: 15px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.custom-sidebar-slot {
|
||||
--sidebar-width: 100px;
|
||||
.demo-sidebar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.demo-sidebar-title {
|
||||
margin-bottom: 16px;
|
||||
color: #969799;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -20,82 +20,116 @@
|
||||
通过在`van-sidebar`上设置`activeKey`属性来控制选中项
|
||||
|
||||
```html
|
||||
<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">
|
||||
<van-sidebar active-key="{{ activeKey }}">
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
Page({
|
||||
data: {
|
||||
activeKey: 0
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 徽标提示
|
||||
|
||||
设置`dot`属性后，会在右上角展示一个小红点。设置`dot`属性后，会在右上角展示相应的徽标
|
||||
|
||||
```html
|
||||
<van-sidebar active-key="{{ activeKey }}">
|
||||
<van-sidebar-item title="标签名称" dot />
|
||||
<van-sidebar-item title="标签名称" dot="5" />
|
||||
<van-sidebar-item title="标签名称" dot="99+" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
### 禁用选项
|
||||
|
||||
通过`disabled`属性禁用选项
|
||||
|
||||
```html
|
||||
<van-sidebar active-key="{{ activeKey }}">
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" disabled />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
### 监听切换事件
|
||||
|
||||
设置`change`方法来监听切换导航项时的事件
|
||||
|
||||
```html
|
||||
<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">
|
||||
<van-sidebar-item title="标签名1" />
|
||||
<van-sidebar-item title="标签名2" />
|
||||
<van-sidebar-item title="标签名3" />
|
||||
</van-sidebar>
|
||||
|
||||
<van-notify id="van-notify" />
|
||||
```
|
||||
|
||||
```js
|
||||
import Notify from '@vant/weapp/dist/notify/notify';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
activeKey: 0
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: `切换至第${event.detail}项`
|
||||
});
|
||||
Notify({ type: 'primary', message: event.detail });
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 提示信息
|
||||
|
||||
设置`dot`属性后，会在右上角展示一个小红点。设置`info`属性后，会在右上角展示相应的徽标
|
||||
|
||||
```html
|
||||
<van-sidebar active-key="{{ activeKey }}">
|
||||
<van-sidebar-item title="标签名称" dot />
|
||||
<van-sidebar-item title="标签名称" info="5" />
|
||||
<van-sidebar-item title="标签名称" info="99+" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Sidebar Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| activeKey | 选中项的索引 | *string \| number* | `0` | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | ------------ | ------------------ | ------ | ---- |
|
||||
| activeKey | 选中项的索引 | _string \| number_ | `0` | - |
|
||||
|
||||
### Sidebar Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|------|------|------|
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------ | -------------- | ------------------ |
|
||||
| change | 切换徽章时触发 | 当前选中徽章的索引 |
|
||||
|
||||
### Sidebar 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| 类名 | 说明 |
|
||||
| ------------ | ------------ |
|
||||
| custom-class | 根节点样式类 |
|
||||
|
||||
### SidebarItem Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 内容 | *string* | `''` | - |
|
||||
| dot | 是否显示右上角小红点 | *boolean* | `false` | - |
|
||||
| info | 提示消息 | *string \| number* | `''` | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | -------------------- | ------------------ | ------- |
|
||||
| title | 内容 | _string_ | `''` |
|
||||
| dot | 是否显示右上角小红点 | _boolean_ | `false` |
|
||||
| info | 提示消息 | _string \| number_ | `''` |
|
||||
| disabled | 是否禁用该项 | _boolean_ | `false` |
|
||||
|
||||
### SidebarItem Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| 名称 | 说明 |
|
||||
| ----- | ------------------------------------------- |
|
||||
| title | 自定义标题栏，如果设置了`title`属性则不生效 |
|
||||
|
||||
### SidebarItem Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|------|------|------|
|
||||
| click | 点击徽章时触发 | 当前徽章的索引 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------ | -------------- | ------------------------------- |
|
||||
| click | 点击徽章时触发 | `event.detail` 为当前徽章的索引 |
|
||||
|
||||
### SidebarItem 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| 类名 | 说明 |
|
||||
| ------------ | ------------ |
|
||||
| custom-class | 根节点样式类 |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user