You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

106 lines
2.5 KiB

<template>
<view class="root" :style="{backgroundImage:'url('+img+')'}">
<view :class="[show ? 'up' : '','shake-up']">
<image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b718cdb0-517d-11eb-a16f-5b3e54966275.png"></image>
</view>
<view :class="[show ? 'down' : '','shake-down']">
<image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b6600500-517d-11eb-8ff1-d5dcf8779628.png"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/aff47ed0-517d-11eb-8ff1-d5dcf8779628.jpg',
show: false,
isOpened: false,
index: 1
}
},
computed:{
pageIndex() {
if (this.index === 1) {
return 'aff47ed0-517d-11eb-8ff1-d5dcf8779628'
} else if (this.index === 2) {
return '1fc36f80-5199-11eb-a16f-5b3e54966275'
} else if (this.index === 3) {
return '20a3bd60-5199-11eb-97b7-0dc4655d6e68'
} else if (this.index === 4) {
return '8b872410-51a7-11eb-8a36-ebb87efcf8c0'
} else {
return 'aff47ed0-517d-11eb-8ff1-d5dcf8779628'
}
}
},
onLoad: function () {
this.music = uni.createInnerAudioContext();
this.music.src = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b5897b20-517d-11eb-a16f-5b3e54966275.wav';
let t = null;
uni.onAccelerometerChange((res) => {
if (Math.abs(res.x) + Math.abs(res.y) + Math.abs(res.z) > 20 && !this.show && this.isOpened) {
this.music.play();
setTimeout(() => {
this.index++;
if (this.index > 4) {
this.index = 1
}
this.img = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/' + this.pageIndex + '.jpg';
}, 2000);
this.show = true;
if (t) {
clearTimeout(t);
}
t = setTimeout(() => {
t = null;
this.show = false;
}, 600)
}
})
},
onShow() {
this.isOpened = true;
},
onUnload() {
this.show = false;
this.isOpened = false;
uni.stopAccelerometer();
this.music.destroy();
}
}
</script>
<style>
.root {
height: 100%;
display: flex;
flex-direction: column;
background-position: center center;
background-repeat: no-repeat;
}
.shake-up,
.shake-down {
height: 50%;
overflow: hidden;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
background: #333;
}
.up {
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.down {
transform: translateY(50%);
-webkit-transform: translateY(50%);
}
image {
height: 100%;
width: 100%;
}
</style>