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