258资源分享网

参考了一系列的小程序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

<view class="list-container"> <view class="item"> <view class="title">列表项1</view> <view class="content">弹层内容1</view> </view> <view class="item"> <view class="title">列表项2</view> <view class="content">弹层内容2</view> </view> <view class="item"> <view class="title">列表项3</view> <view class="content">弹层内容3</view> </view> </view> 复制代码

通过css样式，将弹层内容 <view class="content"> 隐藏

交互设计 弹出设计

<view class='title'> 作为展示标签，也作为点击事件的主体，当点击标签时为 <view class='item'> 的子容器添加 active 激活样式，此时弹层内容通过样式设计为 display: block 状态，即实现弹出显示

<view class="item active"> <view class="title" bind:tap="change">列表项1</view> <view class="content">弹层内容1</view> <!--css display block--> </view> 复制代码 更新设计

为标签点击时提供 changeTitle，changeContent 方法，通过关键字段寻址，并更新数据，从而更新wxml结构，如下列的思路

<view class="title" bind:tap="change" data-index="1">列表项1</view> 复制代码 change(e){ const ds = e...dataset this.toggleActive(e) this.changeTitle(ds, ...) // 或者 this.changeContent(e, ...) } changeTitle(ds, param) { let index = ds.index let $data = findIt(index) $data.title = param this.setData({config.data[index]: ....}) } changeContent(ds, param) { // 思路同changeTitle } 复制代码

上面所述是简化逻辑，实现起来并不如此简单，尤其是寻址逻辑和更新逻辑

实现及应用 wxml <ui-list wx:if="{{collapsConfig}}" list="{{collapsConfig}}" /> 复制代码 js let config = { listClass: 'collapse-pad', data: [], tap: function(param){ // 切换响应方法，样式操作封装在组件内部 // this.title({...}) // this.content({...}) // this.disabled(true|false) } } Page({ data: { collapsConfig: config } }) 复制代码 关于动态标签的一点想法

动态标签的好处是可以将逻辑、寻址等在JS部分来实现，相较于 template 语法，动态标签的方式灵活太多了，能方便的实现组件化、模块化，规范化，和将公共部分抽离，且易于维护。当一个项目有多人维护时，碎片模板是一个地狱。