开发小程序折叠面板

参考了一系列的小程序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样式，将弹层内容隐藏

交互设计

弹出设计

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

  列表项1
  弹层内容1 

更新设计

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

列表项1

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

js

let config = {
  listClass: 'collapse-pad',
  data: [],
  tap: function(param){ // 切换响应方法，样式操作封装在组件内部   
    // this.title({...})  
    // this.content({...}) 
    // this.disabled(true|false)
  }  
}

Page({
  data: {
    collapsConfig: config 
  }
})

关于动态标签的一点想法

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

demo戳这里