微信小程序如何自定义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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
新手简单了解vue
May 29 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 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静态新闻列表自动生成代码
2007/06/14 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
PHP发送短信代码分享
2015/08/11 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHP目录操作实例总结
2016/09/27 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python易忽视知识点小结
2015/05/25 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
矫正人员思想汇报
2014/01/08 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS