微信小程序 换行显示指定行数据量

微信小程序 换行显示指定行数据量

方式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>