| @@ -33,31 +33,31 @@ | |||
| <div class="page page4 fadein" v-if="page==4"> | |||
| <img class="page4Title" :src="imgData.page4Title" /> | |||
| <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> | |||
| <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 class="page page5 fadein" v-if="page==5"> | |||
| <img class="page5Title" :src="imgData.page5Title" /> | |||
| <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> | |||
| <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 class="page page6 fadein" v-if="page==6"> | |||
| <img class="page6Title" :src="imgData.page6Title" /> | |||
| <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> | |||
| <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> | |||
| <img class="page6Txt" :src="imgData.page6Txt" /> | |||
| </div> | |||
| @@ -65,9 +65,9 @@ | |||
| <img class="page7Title fadein" :src="imgData.page7Title" /> | |||
| <img class="page7Txt fadein" :src="imgData.page7Txt" /> | |||
| </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" /> | |||
| </div> | |||
| <img class="pageArrow arrowMc" :src="imgData.pageArrow" v-if="page!=8"/> | |||
| @@ -94,7 +94,8 @@ | |||
| page: 1, | |||
| popCode: 0, //弹窗Code | |||
| oldPageY: 0, | |||
| showHead:true | |||
| showHead:true, | |||
| swiperIndex:0, | |||
| } | |||
| }, | |||
| mounted() { | |||
| @@ -121,9 +122,11 @@ | |||
| end(e) { | |||
| if (this.oldPageY - e.changedTouches[0].clientY > 50 && this.page < 8) { // 跳转下一页 | |||
| this.page++ | |||
| this.swiperIndex=0; | |||
| } | |||
| if (e.changedTouches[0].clientY - this.oldPageY > 50 && this.page > 1) { //跳回上一页 | |||
| this.page-- | |||
| this.swiperIndex=0; | |||
| } | |||
| }, | |||
| prevSwiper(res){ | |||
| @@ -131,6 +134,9 @@ | |||
| }, | |||
| nextSwiper(res){ | |||
| this.$refs[res].next(); | |||
| }, | |||
| changeSwiper(index){ | |||
| this.swiperIndex=index; | |||
| } | |||
| } | |||
| } | |||
| @@ -483,6 +489,8 @@ | |||
| height: auto; | |||
| left: 32vw; | |||
| bottom: 22vw; | |||
| animation-delay: .5s; | |||
| -webkit-animation-delay: .5s; | |||
| } | |||
| } | |||
| .pageArrow { | |||