针对上期打卡需求开发这期需要以列表的形式展现打卡记录但是微信小程序并没有表格组件网站权重下降但是微信小程序并没有表格组件可能是官方考虑到,在前端开发中表格一直都是最复杂的组件之一就没有实现吧。没有现成的组件可以使用针对这个问题目前有两种解决方案：
table组件 table组件第一期打卡采用的原生开发的老板期望第二期需求也能用原生方便后期的维护。于是乎我就开始了造轮子啦:joy:。需要table组件满足一下功能：
主要用于展示结构化数据；
支持自定义操作；
支持自定义表头样式；
支持固定表头长尾关键词挖掘我就开始了造轮子啦:joy:。需要table组件满足一下功能：
主要用于展示结构化数据；
支持自定义操作；
支持自定义表头样式；
支持固定表头可左右滚动等功能。
table组件效果展示miniprogram-table-component 小程序自定义table组件
使用此组件需要依赖小程序基础库 2.2.2 版本同时依赖开发者工具的 npm 构建。
1.基础表格 2.带斑马纹表格 3.带间隔边框表格 4.自定义无数据的提示文案 5.自定义表格头样式 6.固定表头 7.表格横向滑动 8.自定义表格行和单元格样式 快速上手一个简易的微信小程序 table组件 诞生了。新鲜热乎的前面看完了展现效果接下来介绍使用。 自定义的 table 组件使用很简单就是按照npm包和微信自定义组件的方法使用。
1、安装和引入安装组件：
npm install --save miniprogram-table-component 复制代码引入table自定义组件
在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置
{ "usingComponents": { "table-view": "../../../miniprogram_npm/miniprogram-table-component" } } 复制代码注意：npm包的路径。如果这里遇到找不到包的问题可以查看下方的 微信小程序 npm 找到不到npm包的坑？
2、使用table组件在wxml页面需要用到的地方使用如下：
<table headers="{{tableHeader}}" data="{{ row }}" stripe="{{ stripe }}" border="{{ border }}" /> 复制代码在js页面需要用到的地方使用如下：
Page({ /** * 页面的初始数据 */ data: { tableHeader: [ { prop: 'datetime', width: 150, label: '日期', color: '#55C355' }, { prop: 'sign_in', width: 152, label: '上班时间' }, { prop: 'sign_out', width: 152, label: '下班时间' }, { prop: 'work_hour', width: 110, label: '工时' }, { prop: 'statusText', width: 110, label: '状态' } ], 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: '暂无数据' }, /** * 点击表格一行 */ onRowClick: function(e) { console.log('e: ', e) } }) 复制代码 3、配置