小程序布局scroll-view以及不能在一行显示拖拽的问题

前端J先生

于 2021-12-24 10:49:17 发布

阅读量806

点赞数

CC 4.0 BY-SA版权

文章标签：小程序微信小程序

本文链接：https://blog.csdn.net/qq_37547964/article/details/122123094

本文介绍如何使用scroll-view组件实现横向滚动效果，并通过Flex布局进行优化。提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用scroll横向滑动

<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
	 	<view  style="display: inline-block"></view>
</scroll-view>

通过flex设置横向滑动

 	<view  class="v1">
 	<view  
 	class="v2"></view>
</view>
.v1{
 		overflow-x: scroll;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.v2{
flex-shrink: 1;
}

文档竟然都不写出来，搞了小1个小时，害