uniapp仿朋友圈背景图，下拉动画

 可以把下面代码先粘贴过去再细细研究一下，就是做动画，代码是可以实现效果的

<template>
	<view class="pages" @touchmove="move" @touchend="end">
		<view class="bgc_pic" :class="isPlay==1?'isPlatwp':isPlay==2?'isPlafh':''">
			<image :src="circleBg" class="bgc_pimg" v-if="circleBg" :class="isPlay==1?'isPlay':isPlay==2?'isPlaasf':''">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				circleBg: 'https://yiben01.oss-cn-hangzhou.aliyuncs.com/img/65861922b6e0731a44bb1d34aecef8227b592ed1_100.png',
				// 用户操作
				clientData: {
					// 用户手指Y轴
					clientMoveY: '', //按下
					clientEndY: '', //抬起
					// 页面Y轴
					pageY: ''
				},
				sheight: 562, //高度
				isPlay: 0, //是否播放动画
			}
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			// console.log(e);
			this.clientData.pageY = e.scrollTop;
		},
		methods: {
			move(e) {
				// console.log(e);
				// 先判断用户是否到达了顶部
				if (this.clientData.pageY < 1) {
					// 本次手指移动的位置和上次移动的位置对比 <1 证明用户在下拉
					if (this.clientData.clientMoveY - e.changedTouches[0].clientY < 1) {
						// 拿到下拉的距离
						// let distance = this.clientData.clientMoveY - e.changedTouches[0].clientY;
						// console.log(distance);
						// 最大下拉到800rpx ,放大1.8倍大小
						if (this.sheight < 662) {
							// this.sheight -= distance;
							this.sheight = 662
							// 执行动画
							this.isPlay = 1;
						} else {
							//超过800或者1.8倍就return
							return;
						}
					}
					// 上边的代码执行结束之后再把本次手指的位置赋值给data中,用来下一次对比
					this.clientData.clientMoveY = e.changedTouches[0].clientY;
				} else {
					setTimeout(() => {
						this.sheight = 562;
						// 并把动画的class名取消掉
						this.isPlay = 2;
					}, 504);
				}
			},
			// 手指抬起
			end(e) {
				// this.clientData.clientEndY = e.changedTouches[0].clientY;
				// 当图片的高度大于400的时候手指抬起再调用函数
				if (this.sheight > 562) {
					// 执行动画
					this.isPlay = 1;
					// 动画结束后把顶部图片的高度和放大比例该会原来的值
					setTimeout(() => {
						this.sheight = 562;
						// 并把动画的class名取消掉
						this.isPlay = 2;
					}, 504);
				}
			},

		}
	}
</script>

<style scoped>
	.pages {
		width: 100%;
		color: #191919;
	}

	.bgc_pic {
		width: 100%;
		height: 562rpx;
		position: relative;
		margin-top: -100rpx;
	}

	.bgc_pic>image {
		width: 100%;
	}

	.isPlay {
		animation: big 0.2s 1 alternate ease-in-out forwards;
	}

	@keyframes big {
		100% {
			margin-top: 100rpx;
		}
	}

	.isPlaasf {
		animation: biasd 0.5s 1 alternate ease-in-out forwards;
	}

	@keyframes biasd {
		0% {
			margin-top: 100rpx;
		}

		100% {
			margin-top: 0;
		}
	}

	.isPlatwp {
		animation: bis 0.2s 1 alternate ease-in-out forwards;
	}

	@keyframes bis {
		100% {
			height: 662rpx;
		}
	}

	.isPlafh {
		animation: dgsdf 0.5s 1 alternate ease-in-out forwards;
	}

	@keyframes dgsdf {
		0% {
			height: 662rpx;
		}

		100% {
			height: 562rpx;
		}
	}
</style>

这样写 虽然能实现,但是有小bug,第一次进去,手指按着不松的时候会有bug,希望你们可以解决分享一下,哈哈