uniapp实现纵向导航栏

一、效果图

二、代码实现

<template>
	<view class="content">
		<swiper class="swiper" style="height: 100%;" :autoplay="false" vertical='true' circular='true'>
			<swiper-item>
				<image style="width:100%;height:100%" src="../../static/img/index_bg_one.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image style="width:100%;height:100%" src="../../static/img/index_bg_two.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image style="width:100%;height:100%" src="../../static/img/index_bg_three.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image style="width:100%;height:100%" src="../../static/img/index_bg_four.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image style="width:100%;height:100%" src="../../static/img/index_bg_five.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image style="width:100%;height:100%" src="../../static/img/index_bg_six.jpg"></image>
			</swiper-item>
		</swiper>
	</view>
</template>
<style>
page{
		width: 100%;
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
	}
</style>

总结

主要是实现整张图片的上下滚动，因为不会放动态的图片，所以效果图给出来的不明显，使用的时候要注意给 page 添加 100% 的宽高，