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

朴灿烈づ我的快乐病毒、 2021-09-18 21:06 507阅读 0赞

\#**基于uni-app实现滚动上拉的多列复选列表**  
前一篇文章，构建了一个复选列表，但是在实际过程中，列表项过多，导致展示区域很大。不得已改用多列滚动。将列表内容限制在height：500upx 的区域内。  
![多列滑动效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70]  
\#\#**实现的思路**  
使用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容器的大小，所以其能盛放的元素的最大值也就被确定，多余的元素讲无法显示。所以采用这种布局方式不大合适。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70]: /images/20210726/2e0b93a460c445f1987b741d3c93ad5f.png