列表渲染

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

有一组数据,想在界面上显示,可以用一下 wx:for .. 先在页面上添加一组数据 .. 名字是 fruits .. 它里面的东西是一组水果 ... 添加一个苹果 .. 一个香蕉 .. 再添加一个柠檬 ..

在页面的视图文件里 .. 可以用一个 view 组件 .. 上面加上 wx:for .. 把要循环显示的数组交给它 .. 这里就是刚才添加的 fruits ..

数组里的每个项目可以使用 item 来表示 .. 在这组 view 里面,再绑定一个 item ... 这个 item 是一个默认的名字 ..

在这个 view 上面,可以再添加一个 class .. 名字是 item ..

保存 ... 你会看到,页面上会显示一组水果 ..

再到开发者工具的 wxml 这个面板上检查一下 .. 你会看到水果的包装上面都带一个 item 类 ..

再回到视图文件 .. 这里绑定的 item 是列表项目的默认的名字 .. 列表项目的索引值叫 index .. 你也可以在列表里面用一下它 ..

再绑定一个 index .. 页面上会输出列表的索引值还有列表项目 ..

有时候你可能希望自己指定这个项目的名字 .. 可以在这里再用一个 wx:for-item .. 它的值就是项目的名字 .. 比如 fruit ,你也可以使用 wx:for-index 去修改默认的项目的索引的名字 ..

在显示项目时候,再用一下我们自己指定的这个名字 ... 这里就是 fruit ..

现在页面上仍然会显示水果列表里的水果项目 ..

0:00
0:00
2:23
0:00
3:54
0:00
1:46

列表渲染《 微信小程序:视图 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点