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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mingyong.g

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值