微信小程序自定义组件 – 表格组件来啦
针对上期打卡需求开发,这期需要以列表的形式展现打卡记录,但是微信小程序并没有表格组件,可能是官方考虑到,在前端开发中,表格一直都是最复杂的组件之一就没有实现吧。没有现成的组件可以使用,针对这个问题,目前有两种解决方案:
table组件 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、配置
配置部分主要配置这么几个属性,分别是:
配置项 | 说明 | 类型 | 可选值 | 默认值 | 必填 |
---|---|---|---|---|---|
headers | 表格头部标题、列宽度、列属性 | Array | {prop: ‘datetime’, width: 150, label: ‘日期’} | [] | yes |
data | 表格列表数据 | Array | [] | no | |
stripe | 是否为斑马纹 | boolean | true/false | false | no |
border | 是否有间隔线 | boolean | true/false | false | no |
height | 纵向内容过多时,可选择设置高度固定表头。 | string | auto | no | |
msg | 固定无数据情况,展示文案 | string | 暂无数据~ | no | |
header-row-class-name | 自定义表格头样式 | string | no | ||
row-class-name | 自定义表格行样式 | string | no | ||
cell-class-name | 自定义单元格样式 | string | no | ||
bind:rowHandle | 行被点击时会触发该事件 | function | no |
配置相关代码: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 }}" /> 复制代码
header-row-class-name 、 row-class-name 、 cell-class-name 是通过externalClasses支持外部样式,在父组件中控制表格的样式, externalClasses外部样式类, 官方说明 。例子源码通过 github地址 查看。
实现一个自定义表格组件遇到的坑
npm 登录不上和发布不了的问题?
之前也发布过 npm 包,遗忘了 npm login 登录不上需要将淘宝镜像改回npm的。还有一点需要注意的是,每次发布都需要更新 package.json 文件里的版本号。
微信小程序 npm 找到不到npm包的坑?
组件开发完,引入使用的时候,发现npm的包,找不到了?这里比较坑的是小程序的npm有特殊的使用方式。
- 首先在项目的根目录初始化 npm:
npm init -f 复制代码
- 然后安装对应的自定义组件包
npm install -production miniprogram-table-component 复制代码
npm/cnpm/yarn add 均可
-
在微信开发者工具中,设置 —> 项目设置—> 勾选使用npm模块。
-
在微信开发者工具中,工具 —> 构建npm,构建完成会生成 miniprogram_npm 文件夹,项目用到的npm包都在这里。
-
按照自己的使用路径,从 miniprogram_npm 引入需要的包。
table组件源码
- table组件npm地址
- github地址
需求开发时间比较紧迫,也是尽量提高工作效率,把大块时间用来封装组件了。爱越折腾啊,也算是适当给自己的项目增加点难度,多一点追求,技术就会成长的更快。
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 微信小程序自定义组件 – 表格组件来啦