个人中心下滑动画

「爱情、让人受尽委屈。」 2022-12-27 11:16 120阅读 0赞

![在这里插入图片描述][20201210170604272.gif_pic_center]

### 核心代码部分 ###

template 模块

<view>
    		<view class="back">
    			<image class="back_img" src="https://636f-cold-452cb-1302899859.tcb.qcloud.la/back.jpg?sign=ddb32c9a09a0b05e57629325f80952d1&t=1607398831"
    			 mode="aspectFill"></image>
    			<view class="user-message">
    				<image class="user-left" :src="userList.avatarUrl" mode="aspectFill"></image>
    				<view class="user-right">
    					<view class="user-right_name">{ { userList.nickName}}</view>
    				</view>
    			</view>
    			
    			<view class="vipCar">
    				<image src="https://636f-cold-452cb-1302899859.tcb.qcloud.la/123.png?sign=15e521c4d20c745ed6bc85d14a95d7c9&t=1607334210"
    				 mode="aspectFill"></image>
    				<view class="displays" style="padding: 10px;">
    					<view class="iconfont icon-huiyuan" style="font-size: 16px;"></view>
    					<view style="color: #F7B64A;font-size: 12px;">
    						超级plus
    					</view>
    				</view>
    				<view class="car_name">
    					网易云超级会员卡
    				</view>
    				<view class="car_tips">
    					开通会员听歌 撸代码
    				</view>
    			</view>
    		</view>
    		<view class="bottom" :style="{'transform': transform,'transition':transition}" @touchstart="bindtouchstart"
    		 @touchmove="bindtouchmove" @touchend="bindtouchend">
    			<image class="border" src="https://636f-cold-452cb-1302899859.tcb.qcloud.la/border.png?sign=9b6a045597dfc4b371d5be0ee5bd9dfe&t=1607334560"
    			 mode="aspectFill"></image>
    			<view class="bottom_bd">
    				<view class="list">
    					<view class="list_item">
    						<view class="iconfont icon-xiaoxi"></view>
    						我的消息
    					</view>
    					<view class="list_item">
    						<view class="iconfont icon--"></view>
    						我的好友
    					</view>
    					<view class="list_item">
    						<view class="iconfont icon-geren"></view>
    						个人主页
    					</view>
    					<view class="list_item">
    						<view class="iconfont icon-personality-settings"></view>
    						个性装扮
    					</view>
    
    				</view>
    			</view>
    		</view>
    	</view>

script模块

style模块

page { 
    		background-color: #F5F5F5;
    	}
    
    	.list { 
    		width: 95%;
    		margin: auto;
    		background-color: #fff;
    		height: 70px;
    		border-radius: 10px;
    		display: flex;
    		padding: 10px 0;
    	}
    
    	.list_item { 
    		display: flex;
    		flex-direction: column;
    		width: 25%;
    		justify-content: center;
    		align-items: center;
    	}
    
    	.bottom { 
    		position: relative;
    		width: 100%;
    		top: 210px;
    		display: grid;
    	}
    
    	.bottom_bd { 
    		width: 100%;
    		height: 200px;
    		background-color: #F5F5F5;
    		z-index: 999;
    		/* position: relative; top: -152px; */
    		padding-top: 10px;
    	}
    
    	.back { 
    		position: fixed;
    		width: 100%;
    		height: auto;
    	}
    
    	.border { 
    		/* position: absolute; top: -170px;*/
    		width: 100%;
    		height: 19px;
    	}
    
    	.back_img { 
    		width: 100%;
    		opacity: 0.6;
    		position: absolute;
    		top: 0;
    		left: 0;
    		height: 260px;
    	}
    
    	.vipCar { 
    		width: 90%;
    		height: 150px;
    		border-radius: 10px;
    		position: absolute;
    		top: 125px;
    		background-color: #000;
    		left: 5%;
    		opacity: 0.7;
    
    	}
    
    	.vipCar>image { 
    		position: absolute;
    		width: 200px;
    		height: 150px;
    		right: 0px;
    		top: 0px;
    		z-index: 9999;
    
    	}
    
    	.car_name { 
    		position: absolute;
    		top: 30%;
    		left: 10px;
    		font-weight: 800;
    		color: #F7B64A;
    	}
    
    	.car_tips { 
    		position: absolute;
    		bottom: 30%;
    		left: 10px;
    		color: #F6C26B;
    	}
    
    
    
    	.displays { 
    		display: flex;
    	}
    
    	.user-message { 
    		display: flex;
    		padding: 20px 0;
    		position: absolute;
    		top: 18px;
    		left: 0;
    	}
    
    	.user-left { 
    		width: 60px;
    		height: 60px;
    		border-radius: 50%;
    		background-color: var(--mainColor);
    		margin: 0 20px;
    
    	}
    
    	.user-right { 
    		margin: auto 0;
    	}
    
    	.user-right_btn { 
    		margin: auto 0;
    		background-color: #4CA4EE;
    		color: #fff;
    		border: none !important;
    		font-size: 14px;
    	}
    
    	.user-right_name { 
    		font-size: 18px;
    		text-align: center;
    	}
    
    	.user-right_id { 
    		border: 1px solid var(--fontColor);
    		padding: 5px 25px;
    		border-radius: 30px;
    		font-size: 12px;
    	}

[20201210170604272.gif_pic_center]: /images/20221120/1526f8f34ee64c77a5330b9462bd6935.png