miniprogram-accordion v1.0.1
accordion (手风琴)
微信小程序端的手风琴效果组件
效果演示
使用方法
安装accordion
开启微信的npm构建 文档然后安装
npm install --save miniprogtram-accordion
在需要使用 accordion 的页面 .json 中添加 accordion 自定义组件配置
{
"usingComponents": {
"accordion": "miniprogtram-accordion"
}
}
在需要使用 accordion 的页面 .wxml 中引用 accordion
例:
<accordion
list="{{list}}"
colorList="{{colorList}}"
label-class="leabel"
content-class="content"
>
</accordion>
组件属性
list
子项列表数据
必填
类型:Array
默认:[]
格式:
[
{
label: '', // 手风琴子项label
content: '', // 手风琴子项内容,支持小程序rich-text组件的nodes写法
},
{
label: '', // 手风琴子项label
content: '', // 手风琴子项内容,支持小程序rich-text组件的nodes写法
},
...
]
direction
布局模式,决定手风琴是横向布局还是垂直布局
非必填
类型:String
默认:vertical 可选值:vertical (垂直布局) , horizontal (横向布局)
例:
<accordion
list="{{list}}"
direction="vertical"
>
</accordion>
collapseType
手风琴展开模式,
非必填
类型:String
默认:only 可选值:only (只能同时展开一个子项,其他为闭合状态) , all (能同时展开多个子项)
width
手风琴宽度,
非必填
类型:Number
默认:320 支持动态改变宽度,改变宽度之后组件会自动计算并改变组件宽度 例:<accordion list="{{list}}" width="{{width}}" </accordion> <view style="margin-top:20px;"> <button bind:tap="changeWidth">改变宽度</button> </view>
height
手风琴高度
非必填
类型:Number
默认:默认高度根据子项的高度自适应 支持动态改变宽度,改变宽度之后组件会自动计算并改变组件宽度
contentHeight
手风琴子项内容部分高度
非必填
类型:Number
默认:200
labelHeight
手风琴子项标题部分高度
非必填
类型:Number
默认:40
labelWidth
手风琴子项标题部分宽度
非必填
类型:Number
默认:40
currentIndex
默认展开的子项下标
非必填
类型:Array
默认:0
例:
<accordion
list="{{list}}"
collapseType="all"
currentIndex="{{[1,2]}}"
>
</accordion>
duration
动画过渡时间
非必填
类型:Number
默认: 300(ms)
arrowImg
箭头图片资源路径
非必填
类型:String
默认: '' , 当路径为空时,不显示箭头
colorList
各个子项的颜色配置
非必填
类型:Array
默认: { background: 'rgba(114, 172, 209,.2)', color: '#fff', }
label-class
自定义子项标题部分样式
在引用组件的页面编写自定义样式,然后设置组件的label-class属性为自定义的类名
例:
// 引入组件的页面.wxml
<accordion
list="{{list}}"
label-class="leabel"
>
</accordion>
// 引入组件的页面.wxss
.leabel {
padding: 5px;
color: red;
font-size: 12px;
line-height: 20px;
}
content-class
自定义子项内容部分样式
在引用组件的页面编写自定义样式,然后设置组件的content-class属性为自定义的类名
例:
// 引入组件的页面.wxml
<accordion
list="{{list}}"
content-class="content"
>
</accordion>
// 引入组件的页面.wxss
.content {
padding: 10px 20px;
line-height: 30px;
font-size: 14px;
color: red;
}
arrow-horizontal 和 arrow-horizontal-active
分别为横向布局时子项未展开和展开时的自定义样式
在引用组件的页面编写自定义样式,然后设置组件的arrow-horizontal, arrow-horizontal-active属性为自定义的类名
支持绝对定位(推荐)
arrow-vertical 和 arrow-vertical-active
分别为垂直布局时子项未展开和展开时的自定义样式
在引用组件的页面编写自定义样式,然后设置组件的arrow-vertical, arrow-vertical-active属性为自定义的类名
支持绝对定位(推荐)