uniapp实现小红书登陆页面背景图无限滚动效果

<template>
	<view class="uni-navbar">
		<view class="img"  :style="'top:'+top+'rpx'">
			<image  @load="loads" :style="'height:'+height+'rpx'" src="../../../static/login/1.png" mode="" />    
			<image   :style="'height:'+height+'rpx'" src="../../../static/login/1.png" mode="" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0, //张图片的向上偏移
				height: 0, //图片原始高度
			}
		},
		methods: {
			//图片初始化函数
			loads(res) {
				this.height = res.detail.height
				this.top = res.currentTarget.offsetTop
				setInterval(item => {
					this.top--
					if (this.top == -this.height) {
						this.top = res.currentTarget.offsetTop
					}
				},1)
			},
		},
	}
</script>

<style>
	.img {
		display: flex;
		flex-direction: column;
		width: 100%;
		position: fixed;
	}

	.img>image {
		width: 100%;
	}
	.uni-navbar {
		padding-top: var(--status-bar-height); //适应不同手机屏幕的通知栏高度
	}
</style>