用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

沙尔克04vs汉诺威96:你期待的微信小程序表格組件來啦

汉诺威96升级 www.wikuss.com.cn Rolan 2019-9-30 00:23

在做H5開發中表格table是最常見的標簽,如此好用的標簽在微信小程序中卻沒有,無奈,嘆息,絕望?。?!奔著利國利猿的使命,我***開始了造輪之路。實現前言暴露必要屬性例如表頭,數據。支持外部樣式控制表格。手機端 ...

在做H5開發中表格table是最常見的標簽,如此好用的標簽在微信汉诺威96升级中卻沒有,無奈,嘆息,絕望?。?!

奔著利國利猿的使命,我***開始了造輪之路。

實現

前言

  • 暴露必要屬性例如表頭,數據。
  • 支持外部樣式控制表格。
  • 手機端的列表較輕暫時不需要暴露事件。

細節

  • 通過properties暴露了三個屬性官方說明
Component({
  properties: {
       list: {  // 表格數據
      type: Array,
      value: []
    },
    headers: {  //表頭
      type: Array,
      value: []
    },
    hasBorder: {  // 表格中間邊框
      type: String,
      value: "no"
    }
      
  }
})


復制代碼
  • 通過externalClasses支持外部樣式官方說明
/*
s-class-header // 外部定義表頭樣式

s-class-row  // 外部定義行數據樣式

*/


Component({
  externalClasses: ['s-class-header', 's-class-row']
})

復制代碼
  • index.wxml文件通過嵌套循環動態渲染表格
<view class="table table-noborder">
    <view class="tr thead s-class-header">
      <view wx:for="{{headers}}" class="td td-{{hasBorder}}border">{{item.display}}</view>
    
    </view>
    <block wx:for-item='i' wx:for="{{list}}">
      <view class="tr s-class-row">
        <view wx:for-item='j' wx:for="{{headers}}" class="td td-{{hasBorder}}border">{{i[j['text']]}}</view>        
      </view>
    </block>
  </view>

復制代碼
  • index.wxss 使用者對于很個性的樣式可以自行修改源代碼index.wxss文件
.table {
  border: 1px solid #ccc;
  font-size: 28rpx;
  background: #fff;  
  border-right:none;
}
.table-noborder {
  border-right:1rpx solid #ccc;
}
 
.tr{
  display: flex;
}
 
.td {
  text-align: center;
  border: 1px solid #ccc;
  display: inline-block;  
  border-bottom: none;
  flex: 1;
  padding: 16rpx;  
  border-left: none;
}
.td-noborder{  
  border-right: none;
}
 
.thead .td{
  border-top: none;
  padding: 16rpx;
  font-weight: bold;
}

復制代碼

快速上手

.json文件引入組件

{
  "usingComponents": {
    "s-table": "實際路徑/table/index"
  }
}
 
復制代碼

index.wxml 文件使用組件

<s-table hasBorder='no' s-class-header='my-class' s-class-row='my-class-row' headers='{{headers}}' list='{{row}}'></s-table>

復制代碼

完整源代碼和使用說明見github

github地址

更多更好的組件持續更新中...


分享至 : QQ空間
收藏
原作者: 快狗打車前端團隊 來自: 掘金