#基于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容器的大小,所以其能盛放的元素的最大值也就被确定,多余的元素讲无法显示。所以采用这种布局方式不大合适。