小程序模板網(wǎng)

開發(fā)小程序折疊面板

發(fā)布時間:2020-05-21 09:57 所屬欄目:小程序開發(fā)教程


參考了一系列的小程序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)一個項目有多人維護時,碎片模板是一個地獄。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25251.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢