uni-app 侧边导航栏滚动

<template>
	<view class='center'>
		<view class='center-list'>
		<view class="pics">
			<scroll-view class="gundong" scroll-y v-for="(item,index) in navLeft" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
				  {{item.tit}}
				</view>
			</scroll-view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data (){
			return {
				isActive:0,
				navLeft:[
					{index:0,tit:"推荐"},
					{index:1,tit:"小米手机"},
					{index:2,tit:"智能穿戴"},
					{index:3,tit:"Redmi手机"},
					{index:4,tit:"电脑办公"},
					{index:5,tit:"大家电"},
					{index:6,tit:"小家电"},
					{index:7,tit:"智能家居"},
					{index:8,tit:"户外出行"},
					{index:9,tit:"日用百货"},
					{index:10,tit:"儿童用品"},
					{index:11,tit:"有品精选"},
					{index:12,tit:"小米服务"}
				]
			}
		},
		methods:{
			checked(index) {
				this.isActive = index
			}
		}
	}
</script>

<style>
	page {
		height:100%;
	}
	.center{
		width:100%;
		height:100%;
		position:relative;
	}
	.center-list{
		width: 200rpx;
		height:86%;
		position: fixed;
		overflow: auto;
	}
	.pics {
		width:100%;
		height:auto;
	}
	.gundong {
	  width: 200rpx;
	  height: 100rpx;
	}
	.gundong view {
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	/*  background-color: #f1f1f1; */
	  font-size:28rpx;
	  color:#666;
	}
	.active {
		color:#333;
		font-weight:700;
		border-left:8rpx solid #ff5934;
	}
</style>