用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

开发小程序折叠面板

Rolan 2020-2-16 00:41

参考了一系列的小程序UI库。。。,最后参考了ant-design的折叠面板(collapse)组件设计,功能大致如下支持默认展开动态设置标签栏动态设置内容支持无效状态支持切换响应方法戳源码构思折叠面板组件由列表组件(ui-list ...

参考了一系列的小程序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

<view class="list-container">
    <view class="item">
      <view class="title">列表项1</view>
      <view class="content">弹层内容1</view>
    </view>
    <view class="item">
      <view class="title">列表项2</view>
      <view class="content">弹层内容2</view>
    </view>
    <view class="item">
      <view class="title">列表项3</view>
      <view class="content">弹层内容3</view>
    </view>
</view>
复制代码

通过css样式,将弹层内容 <view class="content"> 隐藏

交互设计

弹出设计

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

<view class="item active">
  <view class="title" bind:tap="change">列表项1</view>
  <view class="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(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}}" />
复制代码

js

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

Page({
  data: {
    collapsConfig: config 
  }
})
复制代码

关于动态标签的一点想法

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 天天修改 来自: 掘金