參考了一系列的小程序UI庫。。。，最后參考了ant-design的折疊面板(collapse)組件設(shè)計，功能大致如下

• 支持默認展開
• 動態(tài)設(shè)置標(biāo)簽欄
• 動態(tài)設(shè)置內(nèi)容
• 支持無效狀態(tài)
• 支持切換響應(yīng)方法

戳源碼

構(gòu)思

折疊面板組件由列表組件(ui-list)實現(xiàn)，列表項作為標(biāo)簽頁，列表項子元素 content 作為彈出層，數(shù)據(jù)子項結(jié)構(gòu)大致如下

{
    title: '標(biāo)簽標(biāo)題',
    content: '彈層內(nèi)容'
}
復(fù)制代碼

列表組件

構(gòu)建一個動態(tài)組件 ui-list ，通過配置文件實現(xiàn)列表結(jié)構(gòu)，將如下這段數(shù)據(jù)結(jié)構(gòu)

const mockData = [
  {title: '列表項1', content: '彈層內(nèi)容1'},
  {title: '列表項2', content: '彈層內(nèi)容2'},
  {title: '列表項3', content: '彈層內(nèi)容3'},
]
復(fù)制代碼

生成大致如下的wxml

<view class="list-container">
    <view class="item">
      <view class="title">列表項1</view>
      <view class="content">彈層內(nèi)容1</view>
    </view>
    <view class="item">
      <view class="title">列表項2</view>
      <view class="content">彈層內(nèi)容2</view>
    </view>
    <view class="item">
      <view class="title">列表項3</view>
      <view class="content">彈層內(nèi)容3</view>
    </view>
</view>
復(fù)制代碼

通過css樣式，將彈層內(nèi)容 <view class="content"> 隱藏

交互設(shè)計

彈出設(shè)計

<view class='title'> 作為展示標(biāo)簽，也作為點擊事件的主體，當(dāng)點擊標(biāo)簽時為 <view class='item'> 的子容器添加 active 激活樣式，此時彈層內(nèi)容通過樣式設(shè)計為 display: block 狀態(tài)，即實現(xiàn)彈出顯示

<view class="item active">
  <view class="title" bind:tap="change">列表項1</view>
  <view class="content">彈層內(nèi)容1</view> <!--css display block-->
</view>
復(fù)制代碼

更新設(shè)計

為標(biāo)簽點擊時提供 changeTitle，changeContent 方法，通過關(guān)鍵字段尋址，并更新數(shù)據(jù)，從而更新wxml結(jié)構(gòu)，如下列的思路

<view class="title" bind:tap="change" data-index="1">列表項1</view>
復(fù)制代碼

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
}
復(fù)制代碼

上面所述是簡化邏輯，實現(xiàn)起來并不如此簡單，尤其是尋址邏輯和更新邏輯

實現(xiàn)及應(yīng)用

wxml

<ui-list wx:if="{{collapsConfig}}" list="{{collapsConfig}}" />
復(fù)制代碼

js

let config = {
  listClass: 'collapse-pad',
  data: [],
  tap: function(param){ // 切換響應(yīng)方法，樣式操作封裝在組件內(nèi)部   
    // this.title({...})  
    // this.content({...}) 
    // this.disabled(true|false)
  }  
}

Page({
  data: {
    collapsConfig: config 
  }
})
復(fù)制代碼

關(guān)于動態(tài)標(biāo)簽的一點想法

動態(tài)標(biāo)簽的好處是可以將邏輯、尋址等在JS部分來實現(xiàn)，相較于 template 語法，動態(tài)標(biāo)簽的方式靈活太多了，能方便的實現(xiàn)組件化、模塊化，規(guī)范化，和將公共部分抽離，且易于維護。當(dāng)一個項目有多人維護時，碎片模板是一個地獄。