uniapp横向滚动（scroll-view）

属性名	类型	默认值	说明	平台差异说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向	app-nvue，微信小程序
show-scrollbar	Boolean	false	控制是否出现滚动条	App-nvue 2.1.5+
refresher-enabled	Boolean	false	开启自定义下拉刷新	app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-threshold	number	45	设置自定义下拉刷新阈值	app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-default-style	string	"black"	设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式	app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-background	string	"#FFF"	设置自定义下拉刷新区域背景颜色	app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-triggered	boolean	false	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发	app-vue 2.5.12+,微信小程序基础库2.10.1+
enable-flex	boolean	false	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。	微信小程序 2.7.3
scroll-anchoring	boolean	false	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。	微信小程序 2.8.2
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@refresherpulling	EventHandle		自定义下拉刷新控件被下拉	app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrefresh	EventHandle		自定义下拉刷新被触发	app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrestore	EventHandle		自定义下拉刷新被复位	app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherabort	EventHandle		自定义下拉刷新被中止	app-vue 2.5.12+,微信小程序基础库2.10.1+

使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。

 代码块部分

<template>
	<view class="hand">
		<scroll-view :scroll-x="true" style="white-space: nowrap;">
			<view class="dataInfo">
				<view class="dataList">
					<view class="list"></view>
				</view>
				<view class="dataList">
					<view class="list"></view>
				</view>
				<view class="dataList">
					<view class="list"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<style>
	.hand {
		width: 95%;
		margin: 0 auto;
	}
	
	.dataInfo {
		width: 100%;
		display: flex;
	}
 
	.dataList {
		margin: 10rpx;
	}
 
	.dataList:first-child {
		margin-left: 0;
	}
 
	.list {
		display: inline-block;
		width: 200px;
		height: 100px;
		background: #007AFF;
		border: 1px solid red;
	}
</style>