uniapp 通用需求功能的整理

“成功在优点的发挥，失败在缺点的积累”。说我们是大自然的搬运工，但是要学会整理通常的需求，下次就不用东找西找的了。

轮播改变背景
效果：

实现：
禁止原生导航栏（page.json）

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

xxx.vue

<template>
	<view class="content">
		<view class="top-swiper">
			<view class="swiper-bg">
				<view class="mapping"></view>
				<view class="image"><image :src="swiper.list[swiper.index]" mode="aspectFill"></image></view>
			</view>
			<view class="swiper-box">
				<view style="height: 80px;"></view>
				<swiper 
				    class="swiper" 
					autoplay circular indicator-dots 
					indicator-color="#ffffff"
					indicator-active-color="#888888"
					@change="swiperChange">
					<swiper-item v-for="(item, index) in swiper.list" :key="index">
						<image class="swiper-img" :src="item" :class="{ 'le-active': swiper.index == index }"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			swiper: {
				index: 0,
				list: ['../../static/pdd.png', 
				       '../../static/tb.png',
					   '../../static/tm.png',
					   '../../static/vip.png']
			}
		};
	},
	onLoad() {},
	methods: {
		swiperChange: function(e) {
			this.swiper.index = e.detail.current;
		}
	}
};
</script>
<style scoped lang="scss">
.content {
	width: 100%;
}
.top-swiper {
	margin-bottom: 30upx;
	.swiper-bg {
		padding-top: var(--status-bar-height); //计算状态栏的高度进行适配刘海
		box-sizing: content-box; //在宽度和高度之外绘制元素的内边距和边框
		width: 100%;
		position: relative;
		.mapping {
			box-sizing: content-box;
			padding-top: 400upx;
			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); //给图像设置高斯模糊
			}
		}
	}

	.swiper-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: 300upx;
		margin: 0 20upx;
		.swiper-img {
			width: 100%;
			height: 100%;
			border-radius: 40upx;
			display: block;
			transform: scale(0.9);
			transition: transform 0.3s ease-in-out 0s; //延迟0.3S把动画抛出了
			border-radius: 10px;
			&.le-active {
				transform: scale(1); //鼠标划过时缩放
			}
		}
	}
	
}
</style>

点击联动
效果：

实现：

<template>
	<view class="content">
		<div class="brand-list" v-for="(item,index) in brandList" @tap = "clickBrand(item.id)" :key = "index">
			<text class="brand-text" :class="brandIndex == index? 'brand-active':''">{{item.name}}</text>
		</div>
		<div class="move-content" :style="{'left':moveDistance + 'upx'}"></div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			    brandList: [
					  {name: "全部", id: 0}, 
					  {name: "淘宝", id: 1}, 
					  {name: "京东", id: 2}, 
					  {name: "拼多多", id: 3}, 
					  {name: "唯品会", id: 4},
			   ],
			   brandIndex:0,    //当前品牌索引
			   moveDistance:40  //品牌下方移动块距离
			}
		},
		onLoad() {

		},
		methods: {
           clickBrand(index) {
           	var that = this
           	that.brandIndex = index
           	that.moveDistance = (that.brandIndex * 150) + 40
           	that.maxOrderList[that.brandIndex].page = 1
           	that.maxOrderList[that.brandIndex].nomore = false
           	that.maxOrderList[that.brandIndex].arr = []
           	that.getUserList(that.maxOrderList[that.brandIndex].id)
           }
		}
	}
</script>

<style>
	.content {
		width: 750upx;
		height: 90upx;
		position: relative;
		display: flex;
		flex-direction: row;
		position: fixed;
	}
	.brand-list{
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
	}
	.brand-text{
		font-size: 28upx;
		color: #999999;
	}
	.brand-active {
		color: #e94e49;
	}
	.move-content{
		position: absolute;
		bottom: 0;
		width:70upx;
		height: 8upx;
		background-color: #e94e49;
		border-radius: 6upx;
		transition-property: left;
	    transition-duration: 0.3s;
	    transition-timing-function: ease-out;	
	}
</style>