Accordion 手风琴

可以折叠/展开的内容区域。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Accordion",
  3.     "usingComponents": {
  4.         "wux-accordion-group": "../../dist/accordion-group/index",
  5.         "wux-accordion": "../../dist/accordion/index"
  6.     }
  7. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Accordion</view>
  4.         <view class="page__desc">手风琴</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <wux-accordion-group title="Default" default-current="{{ ['0', '1'] }}">
  8.             <wux-accordion title="Accordion 1" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  9.             <wux-accordion title="Accordion 2" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  10.             <wux-accordion title="Accordion 3" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  11.         </wux-accordion-group>
  12.         <wux-accordion-group title="Thumb">
  13.             <wux-accordion thumb="https://wux.cdn.cloverstd.com/logo.png" title="Accordion 1" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  14.             <wux-accordion thumb="https://wux.cdn.cloverstd.com/logo.png" title="Accordion 2" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  15.             <wux-accordion thumb="https://wux.cdn.cloverstd.com/logo.png" title="Accordion 3" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  16.         </wux-accordion-group>
  17.         <wux-accordion-group title="Disabled">
  18.             <wux-accordion disabled title="Accordion 1" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  19.             <wux-accordion disabled title="Accordion 2" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  20.             <wux-accordion disabled title="Accordion 3" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  21.         </wux-accordion-group>
  22.         <wux-accordion-group title="Custom key" default-current="{{ ['key2'] }}">
  23.             <wux-accordion key="key1" title="Accordion 1" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  24.             <wux-accordion key="key2" title="Accordion 2" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  25.             <wux-accordion key="key3" title="Accordion 3" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  26.         </wux-accordion-group>
  27.         <wux-accordion-group title="Accordion = true" label="Accordion model" accordion default-current="{{ ['0'] }}">
  28.             <wux-accordion title="Accordion 1">微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp</wux-accordion>
  29.             <wux-accordion title="Accordion 2">微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp</wux-accordion>
  30.             <wux-accordion title="Accordion 3">微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp</wux-accordion>
  31.         </wux-accordion-group>
  32.         <wux-accordion-group title="Controlled" controlled current="{{ current }}" bind:change="onChange">
  33.             <wux-accordion title="Accordion 1" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  34.             <wux-accordion title="Accordion 2" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  35.             <wux-accordion title="Accordion 3" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp"></wux-accordion>
  36.         </wux-accordion-group>
  37.     </view>
  38. </view>
  1. Page({
  2.     data: {
  3.         current: [],
  4.     },
  5.     onLoad() {
  6.         this.key = String(Math.floor(Math.random() * 3))
  7.     },
  8.     onChange(e) {
  9.         console.log(e)
  11.         if (e.detail.key.indexOf(this.key) !== -1) {
  12.             return wx.showModal({
  13.                 title: 'No switching is allowed',
  14.                 showCancel: !1,
  15.             })
  16.         }
  18.         this.setData({
  19.             current: e.detail.key,
  20.         })
  21.     },
  22. })

视频演示

Accordion

API

AccordionGroup props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-accordion-group
cellGroupPrefixCls string 自定义 cellGroup 类名前缀 wux-cell-group
defaultCurrent array 默认激活 tab 面板的 key，当 controlled 为 false 时才生效 -
current array 用于手动激活 tab 面板的 key，当 controlled 为 true 时才生效 -
controlled boolean 是否受控 说明文档 false
accordion boolean 是否手风琴模式 false
title string 标题 -
label string 描述 -
bind:change function 切换面板的回调函数 -

Accordion props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-accordion
key string 当前激活 tab 索引 -
thumb string 左侧缩略图 -
title string 左侧标题 -
content string 面板内容 -
disabled boolean 是否禁用 false
showArrow boolean 是否显示箭头图标 true

Accordion slot

名称 描述
- 自定义内容
header 自定义左侧标题

Accordion externalClasses

名称 描述
wux-class 根节点样式类