参考了一系列的小程序UI库。。。,最后参考了ant-design的折叠面板(collapse)组件设计,功能大致如下
- 支持默认展开
- 动态设置标签栏
- 动态设置内容
- 支持无效状态
- 支持切换响应方法
戳源码
构思
折叠面板组件由列表组件(ui-list)实现,列表项作为标签页,列表项子元素 content
作为弹出层,数据子项结构大致如下
{
title: '标签标题',content: '弹层内容'
}
复制代码
列表组件
构建一个动态组件 ui-list
,通过配置文件实现列表结构,将如下这段数据结构
const mockData = [
{title: '列表项1',content: '弹层内容1'},{'列表项2',0);">'弹层内容2'},0);">'列表项3',0);">'弹层内容3'},]
复制代码
生成大致如下的wxml
<view class="list-container">
<view "item">
<view "title">列表项1</view>
<view "content">弹层内容1</view>
</view>
<view 2</view>
<view 2</view>
</view>
<view 3</view>
<view 3</view>
</view>
</view>
复制代码
通过css样式,将弹层内容 <view class="content">
隐藏
交互设计
弹出设计
<view class='title'>
作为展示标签,也作为点击事件的主体,当点击标签时为 <view class='item'>
的子容器添加 active
激活样式,此时弹层内容通过样式设计为 display: block
状态,即实现弹出显示
<view class="item active">
<"title" bind:tap="change">列表项1</view>
<"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(let index = ds.index
let $data = findIt(index)
$data.title = param
this.setData({config.data[index]: ....})
}
changeContent(实现及应用
wxml
<ui-list wx:if="{{collapsConfig}}" list=}" />
复制代码
js
,data: [],tap: function(param){ // 切换响应方法,样式操作封装在组件内部
// this.title({...})
// this.content({...})
// this.disabled(true|false)
}
}
Page({
data: {
collapsConfig: config
}
})
复制代码
关于动态标签的一点想法
动态标签的好处是可以将逻辑、寻址等在JS部分来实现,相较于 template
语法,动态标签的方式灵活太多了,能方便的实现组件化、模块化,规范化,和将公共部分抽离,且易于维护。当一个项目有多人维护时,碎片模板是一个地狱。