开发小程序折叠面板

时间：2021-12-02 来源：互联网编辑：宝哥软件园浏览：次

开发小程序折叠面板(图1) 指的是一系列小程序UI库。最后，参考ant-design的折叠组件设计，其功能如下

支持默认扩展动态设置标签栏动态设置内容支持无效状态支持切换响应方式

戳源码

构思

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

{title:' tag title '，content : ' bullet layer content ' }复制代码

列表组件

构建动态组件ui-list，通过配置文件实现列表结构，并放入以下数据结构

Const mockData=[{title: '列表项1 '，content3360 '项目符号层内容1'}，{title3360 '列表项2 '，content3360 '项目符号层内容2'}，{title3360 '列表项3 '，content3360 '项目符号层内容3'}，

View class=' list-container ' View class=' item ' View class=' title ' list item 1/View class=' content '项目符号层内容1/View/View class=' item ' View class=' title ' list item 2/View class=' content '项目符号层内容2/View/View class=' item ' View class=' title ' list item 3/View class=' content '项目符号层内容3/view /view/view复制代码通过css样式隐藏项目符号层内容视图class=' content '。

交互设计

弹出设计

view class=' title '用作显示标签和点击事件的主体。单击标签时，活动的激活样式被添加到视图类='item '的子容器中。此时，弹性层的内容被设计成通过样式显示：块状态，即实现了弹出显示。

View class=' item active ' View class=' title ' bind : tap=' change '列表项1/view class=' content '项目符号层内容1/view！-CSS显示块-/视图复制代码

更新设计

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

view class=' title ' bind : tap=' change ' data-index=' 1 ' list item 1/view copy code change(e){ const ds=e.数据集。这个。变更标题(ds，)//或者这个。更改内容(例如，)} 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 } } '/Copy代码

js

Letconfig={ list class 3360 ' collapse-pad '，数据3360 []，tap 3360 function(param){//Switch响应方法，Operation封装在组件//this内。})//this . content({ 0.})//this . disabled(true | false)} } page({ data 3360 { collapsconfig 3360 config } })复制代码