微信小程序如何自定义table组件


Posted in Javascript onJune 29, 2019

背景

最近想要捣鼓一个自己的小程序,其中数据展示部分比较多,想用table来做展示,但是微信小程序并没有table组件,于是就自己动手捣鼓了一个,勉强能用。

可以看看效果:

微信小程序如何自定义table组件

etable使用介绍

etable的使用很简单,分为 引入、使用、配置等3个阶段

1、引入

首先在要使用的页面中的json文件中配置如下:

{
"usingComponents": {
"etable" : "/compenents/etable/etable"
}
}

2、使用

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

<view style='padding : 10rpx;'>
<etable config="{{config}}"></etable>
</view>

3、配置

配置阶段主要配置config这个对象,这个对象中有这么几个属性,分别是

  • content --etable数据,数组类型,必填
  • titles --etable头部标题,数组类型,必填
  • props --etable每一列对应的数据的key值,
  • columnWidths --etable 每一列的列宽,值类型使用rpx,注意:(titles,props,columnWidths这3个数组的长度需保持一致)
  • border --etable 是否有边框,Boolean类型,默认true
  • stripe --etable 是否斑马纹,Boolean类型,默认true
  • headbgcolor --etable 标题栏的背景颜色,String类型,默认#ffffff(即白色)

如下示例代码:

/**
* 页面的初始数据
*/
data: {
config:{
content :[],
titles: ['id', '名字', '年龄', '学校'],
props : ['id', 'name', 'age', 'school'],
columnWidths: ['80rpx', '140rpx', '120rpx','390rpx'],
border: true,
stripe : true,
// headcolor : '#dddddd'
}
},

onload:function(){
// 模拟数据
let content = [
{
id: 1,
name: 'pxh',
age: 13,
school: '暨南大学计算机'
},
{
id: 2,
name: 'ap',
age: 12,
school: '中山大学'
},
{
id: 3,
name: 'cf',
age: 12,
school: '华南农业大学'
},
{
id: 4,
name: '林江',
age: 14,
school: '上海交通大学'
}
]
let that = this
// 此处是模拟网络请求
setTimeout(function(){
that.setData({
'config.content' : content
})
},2000)
}

etable的stripe和border背景颜色修改

想要调整斑马纹的背景颜色,找到etable/etable.wxss中的39-45行,如下,可以自行修改

.etable-content-row-bg1{
background-color: #ffffff;
}
.etable-content-row-bg2{
background-color: #efefef;
}

想要调整border的颜色,需要在etable.etable.wxss中分别找到etable-header-column-border 和 etable-content-column-border这2个类,然后修改对应的颜色值即可,此处不多说了。

组件的github地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 #Javascript
微信小程序如何调用json数据接口并解析
Jun 29 #Javascript
pm2启动ssr失败的解决方法
Jun 29 #Javascript
localstorage实现带过期时间的缓存功能
Jun 28 #Javascript
vue分页器组件编写方法详解
Jun 28 #Javascript
Vue分页器实现原理详解
Jun 28 #Javascript
vue实现分页栏效果
Jun 28 #Javascript
You might like
php curl选项列表(超详细)
2013/07/01 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
Smarty模板配置实例简析
2019/07/20 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
详解用JS添加和删除class类名
2019/03/25 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Python3实现二叉树的最大深度
2019/09/30 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Django中template for如何使用方法
2021/01/31 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
十一个高级MySql面试题
2014/10/06 面试题
学生请假条
2014/04/11 职场文书
新郎接新娘保证书
2015/05/08 职场文书
学生会干部任命书
2015/09/21 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
Mysql排序的特性详情
2021/11/01 MySQL