blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

docs(Accordion): add method document

Browse Source
This commit is contained in:
chenjiahan 2020-05-24 19:56:54 +08:00
parent 2eb13caa27
commit 6e572ff313
4 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
example/pages/collapse/index.js
View File

@ -6,29 +6,28 @@ Page({
active1: [0], active1: [0],
active2: 0, active2: 0,
active3: [], active3: [],
active4: [],
title1: '有赞微商城', title1: '有赞微商城',
title2: '有赞零售', title2: '有赞零售',
title3: '有赞美业', title3: '有赞美业',
content1: '提供多样店铺模板，快速搭建网上商城', content1: '提供多样店铺模板，快速搭建网上商城',
content2: content2:
'网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失', '网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失',
content3: '线上拓客，随时预约，贴心顺手的开单收银' content3: '线上拓客，随时预约，贴心顺手的开单收银',
}, },
onChange(event) { onChange(event) {
const { key } = event.currentTarget.dataset; const { key } = event.currentTarget.dataset;
this.setData({ this.setData({
[key]: event.detail [key]: event.detail,
}); });
}, },
onOpen(event) { onOpen(event) {
const openItem = event.detail; Toast(`展开: ${event.detail}`);
Toast(`当前展开的面板的name: ${openItem}`);
}, },
onClose(event) { onClose(event) {
const closeItem = event.detail; Toast(`关闭: ${event.detail}`);
Toast(`当前关闭的面板的name: ${closeItem}`); },
}
}); });

6
example/pages/collapse/index.wxml
View File

@ -14,8 +14,8 @@
</van-collapse> </van-collapse>
</demo-block> </demo-block>
<demo-block title="监听面板打开关闭事件"> <demo-block title="事件监听">
<van-collapse value="{{ active2 }}" data-key="active2" accordion bind:change="onChange" bind:open="onOpen" bind:close="onClose"> <van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange" bind:open="onOpen" bind:close="onClose">
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item> <van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item> <van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item> <van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
@ -23,7 +23,7 @@
</demo-block> </demo-block>
<demo-block title="自定义标题内容"> <demo-block title="自定义标题内容">
<van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange"> <van-collapse value="{{ active4 }}" data-key="active4" bind:change="onChange">
<van-collapse-item> <van-collapse-item>
<view slot="title"> <view slot="title">
{{ title1 }} {{ title1 }}

23
packages/collapse/README.md
View File

@ -49,7 +49,7 @@ Page({
通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式 通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式
```html ```html
<van-collapse value="{{ activeName }}" bind:change="onChange" accordion> <van-collapse accordion value="{{ activeName }}" bind:change="onChange">
<van-collapse-item title="有赞微商城" name="1"> <van-collapse-item title="有赞微商城" name="1">
提供多样店铺模板，快速搭建网上商城 提供多样店铺模板，快速搭建网上商城
</van-collapse-item> </van-collapse-item>
@ -77,7 +77,7 @@ Page({
### 事件监听 ### 事件监听
`van-collapse` 提供了 `change`, `open` 和 `close` 事件。`change` 事件在面板切换时触发。`open` 事件在面板展开时触发。`close` 事件在面板关闭时触发。 `van-collapse` 提供了 `change`, `open` 和 `close` 事件。`change` 事件在面板切换时触发，`open` 事件在面板展开时触发，`close` 事件在面板关闭时触发。
```html ```html
<van-collapse <van-collapse
@ -98,6 +98,25 @@ Page({
</van-collapse> </van-collapse>
``` ```
```javascript
Page({
data: {
activeNames: ['1'],
},
onChange(event) {
this.setData({
activeNames: event.detail,
});
},
onOpen(event) {
Toast(`展开: ${event.detail}`);
},
onClose(event) {
Toast(`关闭: ${event.detail}`);
},
});
```
### 自定义标题内容 ### 自定义标题内容
```html ```html

4
packages/divider/README.md
View File

@ -1,9 +1,5 @@
# Divider 分割线 # Divider 分割线
### 介绍
分割线
### 引入 ### 引入
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart) 在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)