参考了一系列的小程序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 语法，动态标签的方式灵活太多了，能方便的实现组件化、模块化，规范化，和将公共部分抽离，且易于维护。当一个项目有多人维护时，碎片模板是一个地狱。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。