基于uni-app实现滚动上拉的多列复选列表

#基于uni-app实现滚动上拉的多列复选列表
前一篇文章，构建了一个复选列表，但是在实际过程中，列表项过多，导致展示区域很大。不得已改用多列滚动。将列表内容限制在height：500upx 的区域内。

##实现的思路
使用flex布局，使列表内的项横向布局（flex:row;）,给列表项设置好合适的宽度，使得页面一行放下三个列表元素。（当然也可以设置为其他宽带，以调整每一行放置的元素个数）。最后设置justify-content: space-between;使得元素两端对齐。这个时候列表已经呈三列分布了，另还需实现滚动。需要用到uni-app的scroll-view
设置scroll-view为纵向滚动，并设置一定的高度（必须），下面是程序。

页面：

<scroll-view :scroll-y="true" class=" workgroup-box work-list">
					<view class="work-list">
						<label  v-for="item in workgroup" :key="item.id" class="worker-bar">
							<checkbox :value="item.id" :checked="item.isSlected" />
							<view>{{item.name}}</view>
						</label>
					</view>
	</scroll-view>

style:

	.scroll-view{
		height: 500upx;
	}
.work-list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	}
.workgroup-box{
	width: 90%;
	margin-left:5% ;
	height: 500upx;
}
.worker-bar{
	width: 200upx;
	display: flex;
	flex-direction: row;
}

##自己走过的雷区
不得不说，作为一个新手，设计这样简单的页面也是遇到很多坑啊。
起先，为作多列的时候采用的纵向分布，即flex-direction: column;这个时候就必须为整个flex容器设置一个固定高度，以实现换行。这个时候发现滑动无法实现，而且有部分列表元素无法显示。
这个时候就得思考问题出在哪儿了，原来无法滚动是引文scroll-view的子元素即我的flex容器，和scroll-view同大小，也就是说所有内容只需scroll-view的当前视图就能盛放，因而压根不需要滚动。其次，由于限制了flex容器的大小，所以其能盛放的元素的最大值也就被确定，多余的元素讲无法显示。所以采用这种布局方式不大合适。