微信小程序简易table组件实现

前提：微信小程序自1.6.3基础库版本库开始支持简洁组件，之前的版本因不支持，故在引用组件处默认为空节点。关于微信小程序已有模板为何还需构建组件？一是因为组件可以更方便的自定义并绑定行为，二是在其他页面引用时，无需通过import，只需在该页面json文件下配置usingComponents属性即可。（原本想在app.json文件里配置这个属性，从此一劳永逸，但目前貌似还不支持，至少我尝试的时候还不行-.-）

思路：主要是将table的head和tbody部分的数据抽象出来，使之只需要传值就可直接引用（如果用过react、vue等框架，微信小程序组件上手起来会更快，无非就是多了一丢丢配置而已）。

1、首先我们先来搭好table组件的页面布局：

<view class="table-outer-box">

<view class="table table-theme table-flex">

<view class="item" wx:for="{{tableThemes}}" wx:key="{{index}}">{{item}}</view>

</view>

<scroll-view class="scroll-view flex-column" scroll-y="true" bindscrolltolower="loadMore">

<view class="table table-item table-flex" wx:for="{{tableItems}}" wx:key="{{index}}">

<view class="item" wx:for="{{item}}" wx:key="{{index}}">{{item}}</view>

</view>

</scroll-view>

</view>

 

2、接着我们再来填充table样式：

.table-outer-box {

display: flex;

flex-direction: column;

padding: 50rpx 50rpx 0;

flex: 1;

}

.table {

height: 80rpx;

color: #fff;

line-height: 80rpx;

border-top: 1rpx solid #5f677a;

border-bottom: 1rpx solid #5f677a;

text-align: center;

}

.table-flex {

display: flex;

}

.table-theme {

font-size: 28rpx;

}

.table-item {

font-size: 24rpx;

opacity: 0.6;

}

.item {

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

flex: 1;

}

.scroll-view {

flex: 1;

}

 

3、接下来，我们到组件json文件里设置component属性为true

{

"component": true

}

 

4、紧接着，我们到组件js里注册该组件：

Component({

properties: {

tableThemes: {

type: Object, // 因此处的thead是json格式，故将数据类型设置为object

// value: '' //默认值

},

tableItems: {

type: Array,

},

},

data: {

someData: {} // 暂未设置，跟其他页面的data属性和用法类似

},

methods: {

customMethod: function() {

// 暂为定义

}

}

});

 

5、然后，在要引用的test页面的json文件里添加usingComponents属性

{

"navigationBarTitleText": "table test",

"usingComponents": {

"table": "../../components/Table/index"

}

}

 

6、再然后，在要引用的test页面的wxml文件里直接用table标签引入：

<view class="container">

<view class="title">table component</view>

<table tableThemes="{{themeArr}}" tableItems="{{itemArr}}"></table>

</view>

 

7、最后，在test页面的js文件里赋值给tableThemes、tableItems属性（本栗因无api返回，故均采用默认数据）

Page({

data: {

themeArr: {nickName: '昵称', age: '年龄', tell: '电话', address: '住址'},

itemArr: [

{nickName: 'Anna', age: 25, tell: 121243423424, address: 'tianfuStreet'},

{nickName: 'Tina', age: 25, tell: 121243423424, address: 'tianfuStreet'},

{nickName: 'Tom', age: 25, tell: 121243423424, address: 'tianfuStreet'},

{nickName: 'Alex', age: 25, tell: 121243423424, address: 'tianfuStreet'},

{nickName: 'Hallen', age: 25, tell: 121243423424, address: 'tianfuStreet'},

{nickName: 'Lucy', age: 25, tell: 121243423424, address: 'tianfuStreet'},

]

},

onLoad() {

console.log('test is loaded');

}

});

 

test页面样式：

.container {

width: 100%;

height: 100%;

background: black;

}

 

.title {

font-size: 35rpx;

color: #fff;

text-align: center;

}

 

最终效果图如下：