Bläddra i källkod

更新调整

master
wuwenjie 5 år sedan
förälder
incheckning
517c3b8539
1 ändrade filer med 21 tillägg och 13 borttagningar
  1. +21
    -13
      src/views/Home.vue

+ 21
- 13
src/views/Home.vue Visa fil

<div class="page page4 fadein" v-if="page==4"> <div class="page page4 fadein" v-if="page==4">
<img class="page4Title" :src="imgData.page4Title" /> <img class="page4Title" :src="imgData.page4Title" />
<div class="mySwiperBox"> <div class="mySwiperBox">
<van-swipe class="my-swipe" :show-indicators='false' ref="swiper4">
<van-swipe class="my-swipe" :show-indicators='false' :loop="false" ref="swiper4" @change="changeSwiper">
<van-swipe-item v-for="item in 4" :key="item"><img :src="imgData['page4Pic'+item]" /></van-swipe-item> <van-swipe-item v-for="item in 4" :key="item"><img :src="imgData['page4Pic'+item]" /></van-swipe-item>
</van-swipe> </van-swipe>
<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper4')"/>
<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper4')"/>
<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper4')" v-if="swiperIndex!=0"/>
<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper4')" v-if="swiperIndex!=3"/>
</div> </div>
</div> </div>
<div class="page page5 fadein" v-if="page==5"> <div class="page page5 fadein" v-if="page==5">
<img class="page5Title" :src="imgData.page5Title" /> <img class="page5Title" :src="imgData.page5Title" />
<div class="mySwiperBox"> <div class="mySwiperBox">
<van-swipe class="my-swipe" :show-indicators='false' ref="swiper5">
<van-swipe class="my-swipe" :show-indicators='false' :loop="false" ref="swiper5" @change="changeSwiper">
<van-swipe-item v-for="item in 3" :key="item"><img :src="imgData['page5Pic'+item]" /></van-swipe-item> <van-swipe-item v-for="item in 3" :key="item"><img :src="imgData['page5Pic'+item]" /></van-swipe-item>
</van-swipe> </van-swipe>
<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper5')"/>
<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper5')"/>
<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper5')" v-if="swiperIndex!=0"/>
<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper5')" v-if="swiperIndex!=2"/>
</div> </div>
</div> </div>
<div class="page page6 fadein" v-if="page==6"> <div class="page page6 fadein" v-if="page==6">
<img class="page6Title" :src="imgData.page6Title" /> <img class="page6Title" :src="imgData.page6Title" />
<div class="mySwiperBox"> <div class="mySwiperBox">
<van-swipe class="my-swipe" :show-indicators='false' ref="swiper6">
<van-swipe class="my-swipe" :show-indicators='false' :loop="false" ref="swiper6" @change="changeSwiper">
<van-swipe-item v-for="item in 2" :key="item"><img :src="imgData['page6Pic'+item]" /></van-swipe-item> <van-swipe-item v-for="item in 2" :key="item"><img :src="imgData['page6Pic'+item]" /></van-swipe-item>
</van-swipe> </van-swipe>
<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper6')"/>
<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper6')"/>
<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper6')" v-if="swiperIndex!=0"/>
<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper6')" v-if="swiperIndex!=1"/>
</div> </div>
<img class="page6Txt" :src="imgData.page6Txt" /> <img class="page6Txt" :src="imgData.page6Txt" />
</div> </div>
<img class="page7Title fadein" :src="imgData.page7Title" /> <img class="page7Title fadein" :src="imgData.page7Title" />
<img class="page7Txt fadein" :src="imgData.page7Txt" /> <img class="page7Txt fadein" :src="imgData.page7Txt" />
</div> </div>
<div class="page page8" v-if="page==8">
<img class="page8Title fadein" :src="imgData.page8Title" />
<img class="page8Txt fadein" :src="imgData.page8Txt" />
<div class="page page8 fadein" v-if="page==8">
<img class="page8Title" :src="imgData.page8Title" />
<img class="page8Txt" :src="imgData.page8Txt" />
<img class="page8QR fadein" :src="imgData.page8QR" /> <img class="page8QR fadein" :src="imgData.page8QR" />
</div> </div>
<img class="pageArrow arrowMc" :src="imgData.pageArrow" v-if="page!=8"/> <img class="pageArrow arrowMc" :src="imgData.pageArrow" v-if="page!=8"/>
page: 1, page: 1,
popCode: 0, //弹窗Code popCode: 0, //弹窗Code
oldPageY: 0, oldPageY: 0,
showHead:true
showHead:true,
swiperIndex:0,
} }
}, },
mounted() { mounted() {
end(e) { end(e) {
if (this.oldPageY - e.changedTouches[0].clientY > 50 && this.page < 8) { // 跳转下一页 if (this.oldPageY - e.changedTouches[0].clientY > 50 && this.page < 8) { // 跳转下一页
this.page++ this.page++
this.swiperIndex=0;
} }
if (e.changedTouches[0].clientY - this.oldPageY > 50 && this.page > 1) { //跳回上一页 if (e.changedTouches[0].clientY - this.oldPageY > 50 && this.page > 1) { //跳回上一页
this.page-- this.page--
this.swiperIndex=0;
} }
}, },
prevSwiper(res){ prevSwiper(res){
}, },
nextSwiper(res){ nextSwiper(res){
this.$refs[res].next(); this.$refs[res].next();
},
changeSwiper(index){
this.swiperIndex=index;
} }
} }
} }
height: auto; height: auto;
left: 32vw; left: 32vw;
bottom: 22vw; bottom: 22vw;
animation-delay: .5s;
-webkit-animation-delay: .5s;
} }
} }
.pageArrow { .pageArrow {

Laddar…
Avbryt
Spara