弹性布局左右滑动

最新推荐文章于 2023-06-29 14:29:50 发布

微凉薄荷糖

最新推荐文章于 2023-06-29 14:29:50 发布

阅读量1.6k

点赞数 1

分类专栏：前端开发 uni-app 文章标签：前端前端弹性布局 uniapp js css

本文链接：https://blog.csdn.net/shichong123/article/details/116009609

版权

前端开发同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

uni-app

5 篇文章 2 订阅

订阅专栏

弹性布局用起来是真的方便，但是今天老板要实现左右滑动的效果，这可为难我了，翻阅资料，终于找到方法了，上代码。

<view class="content">
		<view v-for=" i in 6" :key="i" class="btn">
			按钮{{i}}
		</view>
</view>

.content{
		display: flex;
		overflow-x: auto;
	}
	.btn {
		width: 100rpx;
		background-color: #FBBE75;
		color: #fff;
		width: 180rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		margin-right: 10rpx;
		/*很重要，禁止子元素的收缩*/
		flex-shrink: 0;
	}

最重要的就是父元素要设置overflow-x:auto; 子元素要设置 flex-shrink:0;

这样就可以实现弹性布局左右滑动啦。看看效果。