微信小程序－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":"这是标题二"}]
}})

原文：https://blog.csdn.net/yelin042/article/details/72518977

微信小程序－wx:for 循环列表相关推荐

微信小程序实现给循环列表添加点击样式
微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: < ...
微信小程序wx:for遍历列表后点击不同列表跳转不同页面
wxml代码 <view class="shangpingflex"><view wx:for="{{shangpinglan}}" wx:k ...
php小程序 100行左右,微信小程序左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. 左侧分类右侧顶部分类右侧列表 .flex_row{display: flex;flex-dire ...
微信小程序foreach遍历_微信小程序wx:for和wx:for-item的用法
微信小程序wx:for和wx:for-item的用法.兴弘海科技在微信小程序定制开发单门店系统的时候,在制作菜单的时候,需要体现左侧是菜单栏目,右侧是菜单名称列表的时候,遇到wx:for和wx:for ...
微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期数据绑定(核心知识) 数据绑定的运算与逻 ...
微信小程序如何双重循环
微信小程序解决双重循环准备知识 wx:for : 使用数组中各项的数据重复渲染该组件当前项的下标变量名默认为 index,当前项的变量名默认为 item 可使用 wx:for-item 指定当前元 ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...
微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
微信小程序-wx.createInnerAudioContext的方法执行多次问题
微信小程序-wx.createInnerAudioContext的方法执行多次问题在项目中用wx.createInnerAudioContext做语音播放这一块,测试的时候发现第一次播放的时候onP ...

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

微信小程序－wx:for 循环列表相关推荐

最新文章

热门文章