微信小程序 wx:for 控制显示的条数

最新推荐文章于 2023-07-12 08:06:04 发布

原创最新推荐文章于 2023-07-12 08:06:04 发布 · 2.3k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

小程序专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何使用微信小程序的wx:if指令控制wx:for循环显示的条数，例如通过wx:if="{{index<3}}"限制显示前3条数据。同时强调了wx:for用于循环数组，wx:for-item用于给列表元素定义别名，以便在模板中引用数据。

通过wx:if 控制wx:for 循环显示的条数

wx:if="{{index<3}}"

<view wx:for="{{noticeList}}"  
	wx:key="index"  
	catchtap="checkUrl" 
	data-type="webview" 
	data-webview="{{item.url}}"  
	wx:if="{{index<3}}">
	<view class="notice-img-box">
		<image class="notice-img" src="{{item.cover_image}}"></image>
	</view>
	<view class="notice-tit-box">
		{{item.title}}
	</view>
</view>

谨记：wx:for是循环数组，wx:for-item即给列表赋别名
不写wx:for-item ，则直接使用 （item.属性名），赋别名，则使用 （别名.属性名）