开发小程序折叠面板

参考了一系列的小程序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 语法,动态标签的方式灵活太多了,能方便的实现组件化、模块化,规范化,和将公共部分抽离,且易于维护。当一个项目有多人维护时,碎片模板是一个地狱。

相关文章

判断H5页面环境在微信中还是小程序中 用小程序提供的wx.mini...
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-...
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法...
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器:...
微信小程序获取data-xx=&quot;&quot;属性的值,自定...
小程序报错:TypeError: Cannot read property ‘addEventLi...