用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

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

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

Rolan 2019-10-17 00:32

背景在做H5開發中表格table是最常見的標簽,如此好用的標簽在微信小程序中卻沒有,無奈,嘆息,絕望!!!奔著利國利猿的使命,我*開始了造輪之路。功能主要用于展示大量結構化數據。支持分頁,自定義操作,長表格寬 ...

wechatbg.jpeg

背景

在做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地址

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

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: s249359986 來自: segmentfault
不朽的浪漫援彩金
西甲射手榜 好运快3软件下载 内蒙古十一选五任选图 3d跨度预测 广西十一选五走势 世界杯比分推荐 海南麻将怎么玩 山西11选五预测软件 fg天天捕鱼漏洞 中原河南麻将手机版下载 十分快3开奖结果 广西快三苹果版 疯狂飞艇全天免费计划网 3d的开奖号是多少 球探足球比分直播即时比分 苏州麻将