uniapp制作app与小程序前端——侧边导航栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一.实现的代码与配置

1.找到相应配置文件

2.打入代码（如下）

<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:"事例1"},
					{index:1,tit:"事例2"},
					{index:2,tit:"事例3"},
					{index:3,tit:"事例4"},
					{index:4,tit:"事例5"},
					{index:5,tit:"事例6"},
					{index:6,tit:"事例7"},
					{index:7,tit:"事例8"},
					{index:8,tit:"事例9"},
					{index:9,tit:"事例10"},
					{index:10,tit:"事例11"},
					{index:11,tit:"事例12"},
					{index:12,tit:"事例13"}
				]
			}
		},
		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>

---

二. 效果展示