uniapp设置横向滚动

关键：【.scroll 设置 white-space: nowrap】 

<template>
	<view class="prefer-content">
		<!-- 标题 -->
		<view class="prefer-title">为你优选</view>
		<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
			<view class="prefer-dis">
				<block v-for="(item, index) in preferdata" :key="index">
					<view class="prefer-view">
						<image :src="item.image" mode="aspectFill"></image>
						<text>{{ item.title }}</text>
						<text>{{ item.lable }}</text>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		preferdata: Array
	},
	data() {
		return {};
	}
};
</script>

<style scoped>
.prefer-content {
	margin: 30upx 0;
}
.prefer-title {
	font-size: 35upx;
	height: 50upx;
	line-height: 50upx;
	margin-bottom: 20upx;
}
.scroll {
	white-space: nowrap;
	width: 100%;
	height: 300upx;
}
.prefer-dis {
	display: flex;
	justify-content: space-between;
}
.prefer-view {
	height: 300upx;
	width: 300upx;
	padding: 0 8upx;
}
.prefer-view image {
	width: 300upx;
	height: 200upx;
	border-radius: 8upx;
}
.prefer-view text {
	height: 45upx;
	line-height: 45upx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
.prefer-view text:nth-child(2) {
	font-size: 30upx;
}
.prefer-view text:nth-child(3) {
	font-size: 27upx;
	color: #9c9c9c;
}
.prefer-dis view:nth-child(2) {
	padding: 0 7upx !important;
}
</style>