码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2018-02-02 14:23:32      阅读:6398      评论:0      收藏:0      [点我收藏+]

标签:就是   ott   column   on()   key   let   技术分享   数据类型   微信小程序   

前提:微信小程序自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;
}
 
最终效果图如下:
技术分享图片
 

 

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

标签:就是   ott   column   on()   key   let   技术分享   数据类型   微信小程序   

原文地址:https://www.cnblogs.com/ganmy/p/8404472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!