微信小程序 換行顯示指定行數據量

微信小程序 換行顯示指定行數據量

方式1 在wxml進行數據的判斷展示

=====page.js 文件
	Page({
		data:{
			testArr:['a0','a1','a2','a3','a4','a5','a6','a7','a8','a9','a10','a11']
		}
	})
=====page.wxml
	<view>
		<block wx:for="{{testArr}}">
			<view wx:if="{{index % 3 == 0}}" style="display: flex;">
				<!-- {{item}} -->
				<block wx:for="{{testArr}}" wx:for-item="item2" wx:for-index="index2">
					<view wx:if="{{index2 >= index &&  index2 < index +3 }}">
						{{item2}}
					</view>
				</block>
			</view>
		</block>
	</view>

方式2 主要爲js文件中封裝數據

=====page.js 文件
	在這裏對數組進行拆分封裝爲
	data:{
		testArr:[['a0','a1','a2'],['a3','a4','a5'],['a6','a7','a8'],['a9','a10','a11']]
	}
=====page.wxml
	<view>
		<block wx:for="{{testArr}}">
			<view style="display: flex;">
				<!-- {{item}} -->
				<block wx:for="{{item}}" wx:for-item="item2" wx:for-index="index2">
					<view >{{item2}}</view>
				</block>
			</view>
		</block>
	</view>

方式3 當只需要對文本進行間隔換行時

=====page.js 文件
	Page({
		data:{
			testArr:['a0','a1','a2','a3','a4','a5','a6','a7','a8','a9','a10','a11']
		}
	})
=====page.wxml
	<view>
		<block wx:for="{{testArr}}">
			<text>{{item}}</text>
			<view wx:if="{{index % 3 == 0}}"></view>	
		</block>
	</view>