滚动条的使用

uniapp 左右两条滚动条

<template>
	<view class="nav">
		<view class="content">
			<scroll-view scroll-y class="left" scroll-top>
				<view class="text">联系</view>
				<view class="text">联系</view>
				<view class="text">联系</view>
				<view class="text">联系</view>
				<view class="text">联系</view>
				<view class="text">联系</view>
				<view class="text">联系</view>
				<view class="text">联系</view>
				<view class="text">联系</view>
				<view class="text">联系</view>
				<view class="text">联系</view>
				<view class="text">联系</view>
			</scroll-view>
			<scroll-view scroll-y class="right">
				<view></view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			};
		}
	}
</script>
<style lang="scss">
/*关键所在是 只需要scroll-view 这个标签存在height即可出现左侧滚动条*/
	page{
		height: 100%;
	}
	.nav{
		height: 100%;
	}
	.content{
		height: 100%;
		.left{
			width: 180rpx;
			height: 100%;
		}
	}
	.text{
		width: 100%;
		text-align: center;
		line-height: 160rpx;
	}
</style>

uniapp 水平滚动条

<template>
	<view class="content">
		<scroll-view scroll-x scroll-left>
			<view class="text">text</view>
			<view class="text">text</view>
			<view class="text">text</view>
			<view class="text">text</view>
			<view class="text">text</view>
			<view class="text">text</view>
			<view class="text">text</view>
			<view class="text">text</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
/* 
关键点是内容text父级存在：不换行 white-space: nowrap;
本身存在：display: inline-block;
*/
	.content{
		white-space: nowrap;
	}
	.text{
		width: 160rpx;
		height: 100rpx;
		display: inline-block;
	}
</style>