有没有更好的方法实现？
<template>
<div class="app">
<image ref="bg_img_1" class="bg-img-1" src="https://bbs.eeui.app/assets/files/2022-03-23/1648046430-795537-login-bg2.jpeg"></image>
<image ref="bg_img_2" class="bg-img-2" src="https://bbs.eeui.app/assets/files/2022-03-23/1648046430-795537-login-bg2.jpeg"></image>
<div class="backdrop"></div>
</div>
</template>
<style scoped>
.app {
flex: 1;
}
.backdrop{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.4);
}
.bg-img-1 {
position: absolute;
width: 750px;
height: 2934px;
top: 0;
left: 0;
}
.bg-img-2{
position: absolute;
width: 750px;
height: 2934px;
top: 2934px;
left: 0;
}
</style>
<script>
const eeui = app.requireModule('eeui');
const animation = app.requireModule('animation');
const imageHeight = 2934;
let count = 0;
export default {
data() {
return {
}
},
pageReady: function (data) {
console.log('页面挂载：页面【渲染完成】时触发');
this.move1();
},
methods: {
move1() {
console.log("move1。。。。。。");
const ref1 = this.$refs.bg_img_1;
const ref2 = this.$refs.bg_img_2;
const self = this;
animation.transition(ref1, {
styles: {
transform: 'translateY(-' + imageHeight +'px)',
},
duration: imageHeight * 10, //ms
delay: 0 //ms
}, function () {
})
animation.transition(ref2, {
styles: {
transform: 'translateY(-' + imageHeight +'px)',
},
duration: imageHeight * 10, //ms
delay: 0 //ms
}, function () {
ref2.style.top = "0px";
ref1.style.top = imageHeight + "px";
self.move2();
})
},
move2() {
console.log("move2。。。。。。");
const ref1 = this.$refs.bg_img_1;
const ref2 = this.$refs.bg_img_2;
const self = this;
animation.transition(ref1, {
styles: {
transform: 'translateY(0px)',
},
duration: 0, //ms
delay: 0 //ms
}, function () {
animation.transition(ref1, {
styles: {
transform: 'translateY(-'+imageHeight+'px)',
},
duration: imageHeight * 10, //ms
delay: 0 //ms
}, function () {
})
})
animation.transition(ref2, {
styles: {
transform: 'translateY(0px)',
},
duration: 0, //ms
delay: 0 //ms
}, function () {
animation.transition(ref2, {
styles: {
transform: 'translateY(-'+imageHeight+'px)',
},
duration: imageHeight * 10, //ms
delay: 0 //ms
}, function () {
ref1.style.top = "0px";
ref2.style.top = imageHeight + "px";
self.move1();
})
})
},
}
};
</script>
