表格table的实现
Github
:https://github.com/tomsiebel/MGTableView--MiniProgram
说表格前先说下 列表渲染wx:for
及block
wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
示例代码1
index.wxml
<!--index.wxml-->
<view wx:for="{
{array}}">{
{item}}</view>
index.js
// index.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
打印结果
1
2
3
4
5
示例代码2
index.wxml
<!--index.wxml-->
<view wx:for="{
{array}}">{
{index}}: {
{item.message}}</view>
index.js
// index.js
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
打印结果
0:foo
1:bar
注:item为数组当前元素的变量名,可以通过wx:for-item制定变量名
列表渲染属性
- wx:for-item 可以指定数组当前元素的变量名
- wx:for-index 可以指定数组当前下标的变量名
- wx:key 指定列表中项目的唯一的标识符
wx:for-item
wx:for-item
指 定数组当前元素的变量名,默认item
如wx:for-item="itemName"
,则下面的循环变量名itemName
,
wx:for-index
wx:for-index
可以指定数组当前下标的变量名,默认index, 下标的值为从0递增,即第一个元素为index=0
如wx:for-index="idx"
,则下面的循环数组的下标名变为idx 即第一个元素变为idx=0
示例代码
index.wxml
<!--index.wxml-->
<view w