页面中悬浮图标，上滑页面到一定高度时，图标的滑动与变透明

<view class="card " :class="hidden===true ? 'card-hidden' : hidden===false ? 'card-open' : ''" @click="toCard">
<image class="card-bg" src="../../static/images/new/card_seat_bg .png" mode=""></image>
<view class="card-seat">
	<image src="../../static/images/new/card_seat.png" mode=""></image>
</view>
</view>

onPageScroll可以监听滑动时页面的高度，可以通过这个来实现图标的滑出与滑入 

onPageScroll(e) {
	this.pageY = e.scrollTop;
	if(this.pageY<300){
	this.pageY=300
	this.hidden=false
	}else{
		this.hidden=true
	}
			
},

 若要实现悬浮图标的动画效果，css部分最重要的部分是animation，opacity: 0.5给图片设置透明度。

.card{
			position: fixed;
			top: 800upx;
			right:0;
			z-index: 10;
			width: 189upx;
			height: 139upx;
			.card-bg{
				width: 189upx;
				height: 139upx;
			}
			.card-seat{
				position: absolute;
				top: 0;
				left: 0;
				width: 84upx;
				height: 84upx;
				margin: 20upx 0 30upx 20upx;
				z-index: 11;
				image{
					width: 84upx;
					height: 84upx;
				}
			}
		}
		.card-hidden{
			animation: move 0.3s 1 alternate ease-in-out forwards;
			opacity: 0.5;
		}
		@keyframes move {
			from {
				width:189upx;
			}
			to{
				width: 100upx;
			}
		}
		
		.card-open{
			animation: open 0.3s 1 alternate ease-in-out forwards;
		}
		@keyframes open {
			from {
				width: 100upx;
			}
			to{
				width: 189upx;
			}
		}