你期待的微信小程序表格組件來啦

你期待的微信小程序表格組件來啦

背景

在作H5開發中表格table是最多見的標籤，如此好用的標籤在微信小程序中卻沒有，無奈，嘆息，絕望！！！

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

功能

主要用於展現大量結構化數據。

支持分頁、自定義操做、長，寬表格滾動等功能。

實現

前言

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

細節

• 經過properties暴露了三個屬性 官方說明

Component({
  properties: {
       list: {  // 表格數據
      type: Array,
      value: []
    },
    headers: {  //表頭
      type: Array,
      value: []
    },
    hasBorder: {  // 表格中間邊框
      type: String,
      value: "no"
    },
      height: { //table的高度
      type: Number || String,
      value: ''
    },
    width: {
      type: Number,
      value: 0
    },
    tdWidth: {
      type: Number,
      value: 35
    }
      
  }
})


複製代碼

• 經過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' width='200' tdWidth='100' height='200' s-class-header='my-class' s-class-row='my-class-row' headers='{{headers}}' list='{{row}}'></s-table>

複製代碼

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

github地址

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

關於咱們

---

快狗打車前端團隊專一前端技術分享，按期推送高質量文章，歡迎關注點贊。 文章同步發佈在公衆號喲，想要第一時間獲得最新的資訊，just scan it ！