uniapp实现scroll-view的横向滚动

首先,他不支持flex布局,所以请用科学方法。比较优雅,也不需要浮动那么传统!

scroll-view的内层view元素需要

display: inline-block

scroll-view的外层元素需要

white-space: nowrap

下面是完整view代码

<view>
			<scroll-view class="scroll-view" scroll-x="true" @scroll="scroll" scroll-left="100%"
				@scrolltolower="scrolltolower">
				<view class="item" v-for="(item,index) in ListTab" :key="index">
					{{item.name}}
				</view>
			</scroll-view>
		</view>

css样式

.scroll-view {
		background: #3F536E;
		white-space: nowrap;

	}

	.item {
		margin-left: 15rpx;
		display: inline-block;
		padding: 20rpx 30rpx;
	}

你可能感兴趣的:(前端是个什么鬼,css,javascript,html)