123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <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>
|