uni-app实现滚动渐变的顶部导航栏+卡片式轮播图

本页面使用了滚动渐变的顶部导航栏和卡片式轮播图，组合在一起有良好的视觉效果。

1. 先上效果图：
   
   
   
2. 上代码:
   pages.json代码：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "轮播图",
				"navigationStyle": "custom"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

index.vue代码：

<template>
	<view class="content">
		<view class="top-swiper">
			<view class="bg">
				<view class="placeholder"></view>
				<view class="image"><image :src="swiper.list[swiper.index]" mode="aspectFill"></image></view>
			</view>
			<view class="box">
				<view style="height: 30px;"></view>
				<swiper class="swiper" autoplay="true" :previous-margin="swiper.margin" :next-margin="swiper.margin" :circular="true" @change="swiperChange">
					<swiper-item v-for="(item, index) in swiper.list" :key="index">
						<image class="le-img" :src="item" :class="{ 'le-active': swiper.index == index }"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			swiper: {
				margin: '100rpx',
				index: 0,
				list: ['/static/pic1.jpg', '/static/pic2.jpg','/static/pic3.jpg','/static/pic4.jpg','/static/pic5.jpg']
			}
		};
	},
	onLoad() {},
	methods: {
		swiperChange: function(e) {
			this.swiper.index = e.detail.current;
		}
	}
};
</script>
<style lang="scss" scoped>
.content {
	width: 100%;
}
.top-swiper {
	margin-bottom: 30rpx;

	.bg {
		padding-top: var(--status-bar-height);
		box-sizing: content-box;
		width: 100%;
		position: relative;

		.placeholder {
			box-sizing: content-box;
			padding-top: 600rpx;
			height: 44px;
		}

		.image {
			box-sizing: content-box;
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;

			&::after {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
				bottom: 0;
				left: 0;
				height: 65%;
				background-image: linear-gradient(to bottom, transparent, #fff);
			}

			> image {
				position: absolute;
				box-sizing: content-box;
				padding: 60px;
				top: 0;
				left: 0;
				width: 100%;
				height: 80%;
				top: -60px;
				left: -60px;
				filter: blur(50px);
			}
		}
	}

	.box {
		padding-top: var(--status-bar-height);
		box-sizing: content-box;
		position: absolute;
		z-index: 5;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	.swiper {
		height: 600rpx;
		.le-img {
			width: 100%;
			height: 100%;
			display: block;
			transform: scale(0.9);
			transition: transform 0.3s ease-in-out 0s;
			border-radius: 4px;

			&.le-active {
				transform: scale(1);
			}
		}
	}
}
</style>