微信小程序-wx:for 循环列表

Posted 一天一个知识点

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序-wx:for 循环列表相关的知识,希望对你有一定的参考价值。

 

获取了 N 条信息(具体有多少条不确定),如何在界面中动态呈现出来呢?

.wxml 代码

<view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">
{{index+1}}、{{item.title}}
</view>

核心代码就是 wx:for,对应一个数组。

而 wx:for-index 指明后面如果要用数组索引的话,           用什么名字,如果名字是 index,则可省略,直接使用。

而 wx:for-item  指明后面如果要用数组索引对应的项的话,用什么名字,如果名字是 item,则可省略,直接使用。

.js 代码

Page({

data: {
    items: [
        {
            "url":"http://127.0.0.1/1.flv",
            "title":"这是标题一"
        },
        {
            "url":"http://127.0.0.1/2.flv",
            "title":"这是标题二"
        }
    ]
}

})

















以上是关于微信小程序-wx:for 循环列表的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序之for循环

微信小程序wx:for循环的用法

微信小程序for循环以及页面跳转

微信小程序之使用wx:for遍历循环

微信小程序 wx:for与wx:for-item

#yyds干货盘点#愚公系列2022年10月 微信小程序-循环的使用