collapse 微信小程序_开发小程序折叠面板

参考了一系列的小程序UI库。。。，最后参考了ant-design的折叠面板(collapse)组件设计，功能大致如下

支持默认展开

动态设置标签栏

动态设置内容

支持无效状态

支持切换响应方法

构思

折叠面板组件由列表组件(ui-list)实现，列表项作为标签页，列表项子元素 content 作为弹出层，数据子项结构大致如下

{

title: '标签标题',

content: '弹层内容'

}

复制代码

列表组件

构建一个动态组件 ui-list ，通过配置文件实现列表结构，将如下这段数据结构

const mockData = [

{title: '列表项1', content: '弹层内容1'},

{title: '列表项2', content: '弹层内容2'},

{title: '列表项3', content: '弹层内容3'},

]

复制代码

生成大致如下的wxml

列表项1

弹层内容1

列表项2

弹层内容2

列表项3

弹层内容3

复制代码

通过css样式，将弹层内容  隐藏

交互设计

弹出设计