uniapp 通用需求功能的整理

偏执的太偏执、 2023-03-05 12:38 70阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]

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

**轮播改变背景**  
效果：  
![在这里插入图片描述][20200805235736820.gif]

实现：  
禁止原生导航栏（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>

**点击联动**  
效果：  
![在这里插入图片描述][20200804202211643.gif]  
实现：

<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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/b1f3b8421eeb4cbe8ef73fee2aed44fd.png
[20200805235736820.gif]: /images/20230208/5fcb47be9e4f427582e0d661dd7b98e7.png
[20200804202211643.gif]: /images/20230208/abf4f7658f8d45c091c416f9ad4117c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230208/64ac5406ce584994b4621f4f62758ce2.png