版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JaRiS_jade/article/details/80364297
微信小程序 自定义组件的使用
官方文档:微信小程序–自定义组件
以table组件为例:
一、创建自定义组件
1.新建一个components文件夹(用来存放组件),在其中创建一个table文件夹,如图所示:
2.在table.json文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件)
{
"component":true,
"usingComponents":{}//用来引用其他组件
}
3.在table.wxml中写自定义组件的内部WXML结构
<!--components/table/table.wxml-->
<view class='table'>
<view class="thead">
<view class='tr'>
<view class="th" wx:for="{{tableThemes}}" wx:key="{{index}}">{{item}}</view>
</view>
</view>
<view class="tbody">
<view class="tr" wx:for="{{tableItems}}" wx:key="{{index}}">
<view class="td" wx:for="{{item}}" wx:key="{{index}}">{{item}}</view>
</view>
</view>
</view>
4.在table.wss中写自定义组件的样式(样式只应用于这个自定义组件)
PS:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器
/* components/table/table.wxss */
.table{
display: table;
border-collapse: collapse;
color: grey;
font-size: 32rpx;
text-align: center;
vertical-align: middle;
width: 100%;
}
.table .tr{
display: table-row;
height: 60rpx;
vertical-align: middle;
line-height: 60rpx;
}
.table .thead{
display: table-header-group;
}
.table .thead .tr{
background: #eee;
}
.table .tbody{
display: table-row-group;
}
.table .tr .th,.table .tr .td{
display: table-cell;
border: 1px solid #ddd;
}
5.在table.js文件中使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。
PS:组件的属性值和内部数据将被用于组件 wxml 的渲染,其中,属性值是可由组件外部传入的。
Component({
properties: {
// 这里定义了属性,属性值可以在组件使用时指定
tableThemes: {
type: Object, // 因此处的thead是json格式,故将数据类型设置为object
},
tableItems: {
type: Array,
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
二、使用自定义组件
1.使用已注册的自定义组件前,首先要在页面的 json 文件中进行引用声明。
{
"usingComponents": {
"table": "/components/table/table"
}
}
这样,在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。
2.在页面的wxml文件中引用组件。
<table tableThemes="{{themeArr}}" tableItems="{{itemArr}}"></table>
3.在页面的js文件中提供属性的数据。
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' },
]
}