小程序模板網(wǎng)

微信小程序自定義組件 - 表格組件來啦

發(fā)布時(shí)間:2020-05-14 10:20 所屬欄目:小程序開發(fā)教程

針對(duì)上期打卡需求開發(fā),這期需要以列表的形式展現(xiàn)打卡記錄,但是微信小程序并沒有表格組件,可能是官方考慮到,在前端開發(fā)中,表格一直都是最復(fù)雜的組件之一就沒有實(shí)現(xiàn)吧。沒有現(xiàn)成的組件可以使用,針對(duì)這個(gè)問題,目前有兩種解決方案:

table組件
table組件

第一期打卡采用的原生開發(fā)的,老板期望第二期需求也能用原生,方便后期的維護(hù)。于是乎,我就開始了造輪子啦:joy:。需要table組件滿足一下功能:

  • 主要用于展示結(jié)構(gòu)化數(shù)據(jù);
  • 支持自定義操作;
  • 支持自定義表頭樣式;
  • 支持固定表頭,可左右滾動(dòng)等功能。

table組件效果展示

miniprogram-table-component 小程序自定義table組件

使用此組件需要依賴小程序基礎(chǔ)庫 2.2.2 版本,同時(shí)依賴開發(fā)者工具的 npm 構(gòu)建。

1.基礎(chǔ)表格

2.帶斑馬紋表格

3.帶間隔邊框表格

4.自定義無數(shù)據(jù)的提示文案

5.自定義表格頭樣式

6.固定表頭

7.表格橫向滑動(dòng)

8.自定義表格行和單元格樣式

快速上手

一個(gè)簡(jiǎn)易的微信小程序 table組件 誕生了。新鮮熱乎的,前面看完了展現(xiàn)效果,接下來介紹使用。 自定義的 table 組件,使用很簡(jiǎn)單,就是按照npm包和微信自定義組件的方法使用。

1、安裝和引入

  • 安裝組件:
npm install --save miniprogram-table-component
復(fù)制代碼
  • 引入table自定義組件

在頁面的 json 配置文件中添加 recycle-view 和 recycle-item 自定義組件的配置

{
  "usingComponents": {
    "table-view": "../../../miniprogram_npm/miniprogram-table-component"
  }
}
復(fù)制代碼

注意:npm包的路徑。如果這里遇到找不到包的問題,可以查看下方的 微信小程序 npm 找到不到npm包的坑?

2、使用table組件

在wxml頁面需要用到的地方使用,如下:

<table 
    headers="{{tableHeader}}" 
    data="{{ row }}" 
    stripe="{{ stripe }}"
    border="{{ border }}"
/>
復(fù)制代碼

在js頁面需要用到的地方使用,如下:

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    tableHeader: [
      {
        prop: 'datetime',
        width: 150,
        label: '日期',
        color: '#55C355'
      },
      {
        prop: 'sign_in',
        width: 152,
        label: '上班時(shí)間'
      },
      {
        prop: 'sign_out',
        width: 152,
        label: '下班時(shí)間'
      },
      {
        prop: 'work_hour',
        width: 110,
        label: '工時(shí)'
      },
      {
        prop: 'statusText',
        width: 110,
        label: '狀態(tài)'
      }
    ],
    stripe: true,
    border: true,
    outBorder: true,
    row: [
      {
          "id": 1,
          "status": '正常',
          "datetime": "04-01",
          "sign_in_time": '09:30:00',
          "sign_out_time": '18:30:00',
          "work_hour": 8,
      }, {
          "id": 2,
          "status": '遲到',
          "datetime": "04-02",
          "sign_in_time": '10:30:00',
          "sign_out_time": '18:30:00',
          "work_hour": 7,
      }, {
          "id": 29,
          "status": '正常',
          "datetime": "04-03",
          "sign_in_time": '09:30:00',
          "sign_out_time": '18:30:00',
          "work_hour": 8,
      }, {
          "id": 318,
          "status": '休息日',
          "datetime": "04-04",
          "sign_in_time": '',
          "sign_out_time": '',
          "work_hour": '',
      }, {
          "id": 319,
          "status": '正常',
          "datetime": "04-05",
          "sign_in_time": '09:30:00',
          "sign_out_time": '18:30:00',
          "work_hour": 8,
      }
    ],
    msg: '暫無數(shù)據(jù)'
  },

  /** 
   * 點(diǎn)擊表格一行
   */
  onRowClick: function(e) {
    console.log('e: ', e)
  }
})
復(fù)制代碼

3、配置

配置部分主要配置這么幾個(gè)屬性,分別是:

配置項(xiàng) 說明 類型 可選值 默認(rèn)值 必填
headers 表格頭部標(biāo)題、列寬度、列屬性 Array {prop: 'datetime', width: 150, label: '日期'} [] yes
data 表格列表數(shù)據(jù) Array   [] no
stripe 是否為斑馬紋 boolean true/false false no
border 是否有間隔線 boolean true/false false no
height 縱向內(nèi)容過多時(shí),可選擇設(shè)置高度固定表頭。 string   auto no
msg 固定無數(shù)據(jù)情況,展示文案 string   暫無數(shù)據(jù)~ no
header-row-class-name 自定義表格頭樣式 string     no
row-class-name 自定義表格行樣式 string     no
cell-class-name 自定義單元格樣式 string     no
bind:rowHandle 行被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 function     no

配置相關(guān)代碼:chestnut::

<table  
      header-row-class-name="header-class"
      row-class-name="row-class"
      cell-class-name="cell-class"
      headers="{{tableHeader}}" 
      data="{{ row }}" 
      stripe="{{ stripe }}"
      height="{{ height }}"
      border="{{ border }}"
      bind:rowClick="onRowClick"
      bind:cellClick="onCellClick" 
      no-data-msg="{{ msg }}"
/> 
復(fù)制代碼

header-row-class-name 、 row-class-name 、 cell-class-name 是通過externalClasses支持外部樣式,在父組件中控制表格的樣式, externalClasses外部樣式類, 官方說明 。例子源碼通過 github地址 查看。

實(shí)現(xiàn)一個(gè)自定義表格組件遇到的坑

npm 登錄不上和發(fā)布不了的問題?

之前也發(fā)布過 npm 包,遺忘了 npm login 登錄不上需要將淘寶鏡像改回npm的。還有一點(diǎn)需要注意的是,每次發(fā)布都需要更新 package.json 文件里的版本號(hào)。

微信小程序 npm 找到不到npm包的坑?

組件開發(fā)完,引入使用的時(shí)候,發(fā)現(xiàn)npm的包,找不到了?這里比較坑的是小程序的npm有特殊的使用方式。

  • 首先在項(xiàng)目的根目錄初始化 npm:
npm init -f 
復(fù)制代碼
  • 然后安裝對(duì)應(yīng)的自定義組件包
npm install -production miniprogram-table-component
復(fù)制代碼

npm/cnpm/yarn add 均可

  • 在微信開發(fā)者工具中,設(shè)置 —> 項(xiàng)目設(shè)置—> 勾選使用npm模塊。

  • 在微信開發(fā)者工具中,工具 —> 構(gòu)建npm,構(gòu)建完成會(huì)生成 miniprogram_npm 文件夾,項(xiàng)目用到的npm包都在這里。

  • 按照自己的使用路徑,從 miniprogram_npm 引入需要的包。

table組件源碼

需求開發(fā)時(shí)間比較緊迫,也是盡量提高工作效率,把大塊時(shí)間用來封裝組件了。愛越折騰啊,也算是適當(dāng)給自己的項(xiàng)目增加點(diǎn)難度,多一點(diǎn)追求,技術(shù)就會(huì)成長(zhǎng)的更快。


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