npm i vue- awesome- swiper@3 - S
npm i vue- awesome- swiper@3.1 .3 - S
import VueAwesomeSwiper from 'vue-awesome-swiper' ;
import 'swiper/dist/css/swiper.css' ;
Vue. use ( VueAwesomeSwiper) ;
import { swiper, swiperSlide } from 'vue-awesome-swiper' ;
components: { swiper, swiperSlide } ,
data ( ) {
const self = this
return {
swiperOption: {
direction: 'vertical' ,
autoHeight: true ,
initialSlide: 0 ,
on: {
slideChange ( ) {
let index = this . activeIndex
self. slideChange ( index)
}
}
} ,
current: 0 ,
ticketShow: true ,
voteShow: true ,
}
} ,
< transition name= "fade" >
< swiper id= "swiperBox" : options= "swiperOption" ref= "mySwiper" >
< ! -- 千面影帝会场页-- >
< swiper- slide class = "swiper-slide1" >
< div class = "page" >
< play
: read_info= "read_info"
: user_info= "user_info"
> < / play>
< / div>
< / swiper- slide>
< ! -- 金牌投资人会场页 -- >
< swiper- slide class = "swiper-slide2" v- if = "ticketShow" >
< div class = "page" >
< ticket
: ticket_consume_info= "ticket_consume_info"
> < / ticket>
< / div>
< / swiper- slide>
< ! -- 应援先锋会场 -- >
< swiper- slide class = "swiper-slide3" v- if = "voteShow" >
< div class = "page" >
< vote : vote_info= "vote_info" > < / vote>
< / div>
< / swiper- slide>
< / swiper>
< / transition>
< style lang= "scss" scoped>
@import "../css/utils" ;
/deep/ . swiper- container {
width: 100 % ;
margin- left: auto;
margin- right: auto;
height: remit ( 1624 ) ! important;
. swiper- wrapper {
height: remit ( 1624 ) ! important;
. swiper- slide {
overflow: auto;
height: remit ( 1624 ) ! important;
}
}
}
< / style>
< template>
< ac- page : error- hint= "true" >
< transition name= "fade" >
< swiper id= "swiperBox" : options= "swiperOption" ref= "mySwiper" >
< ! -- 千面影帝会场页-- >
< swiper- slide class = "swiper-slide1" >
< div class = "page" >
< play
: read_info= "read_info"
: user_info= "user_info"
> < / play>
< / div>
< / swiper- slide>
< ! -- 金牌投资人会场页 -- >
< swiper- slide class = "swiper-slide2" v- if = "ticketShow" >
< div class = "page" >
< ticket
: ticket_consume_info= "ticket_consume_info"
> < / ticket>
< / div>
< / swiper- slide>
< ! -- 应援先锋会场 -- >
< swiper- slide class = "swiper-slide3" v- if = "voteShow" >
< div class = "page" >
< vote : vote_info= "vote_info" > < / vote>
< / div>
< / swiper- slide>
< / swiper>
< / transition>
< / ac- page>
< / template>
< script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' ;
import play from './play.vue' ;
import ticket from './ticket.vue' ;
import vote from './vote.vue' ;
export default {
components: { play, ticket, vote, swiper, swiperSlide } ,
name: 'ExampleVuePage' ,
props: {
ticket_consume_info: { Object } ,
} ,
data ( ) {
const self = this
return {
swiperOption: {
direction: 'vertical' ,
autoHeight: true ,
initialSlide: 0 ,
on: {
slideChange ( ) {
let index = this . activeIndex
self. slideChange ( index)
}
}
} ,
current: 0 ,
ticketShow: true ,
voteShow: true ,
}
} ,
created ( ) {
} ,
props: {
vote_info: { Object } , ticket_consume_info: { Object } , read_info: { Object } ,
user_info: { Object } ,
onePage: {
type: Number,
default : 0
}
} ,
methods: {
slideChange ( index) {
console. log ( index, 'zhi' )
let desc = ''
if ( this . ticketShow == false && this . voteShow == true ) {
if ( index == 1 ) {
desc = '月票页'
this . $emit ( 'reportEvent' , desc)
let touchStart
this . swiper. slides. on ( 'touchstart' , function ( e) {
touchStart = e. targetTouches[ 0 ] . pageY;
} , true ) ;
this . swiper. slides. on ( 'touchmove' , function ( e) {
this . current = e. targetTouches[ 0 ] . pageY;
let touchesDiff = this . current - touchStart;
if ( touchesDiff < - 130 ) {
location. href = `https://youxi.vip.qq.com/m/act/60f344f2c8_tencentanime_611453.html?ADTAG=event.611453.kaiqiye`
}
} , true )
} else if ( index == 0 ) {
desc = '身份+阅读页'
this . $emit ( 'reportEvent' , desc)
}
} else if ( this . voteShow == false && this . ticketShow == true ) {
if ( index == 1 ) {
desc = '解锁页'
this . $emit ( 'reportEvent' , desc)
let touchStart
this . swiper. slides. on ( 'touchstart' , function ( e) {
touchStart = e. targetTouches[ 0 ] . pageY;
} , true ) ;
this . swiper. slides. on ( 'touchmove' , function ( e) {
this . current = e. targetTouches[ 0 ] . pageY;
let touchesDiff = this . current - touchStart;
if ( touchesDiff < - 130 ) {
location. href = `https://youxi.vip.qq.com/m/act/60f344f2c8_tencentanime_611453.html?ADTAG=event.611453.kaiqiye`
}
} , true )
} else if ( index == 0 ) {
desc = '身份+阅读页'
this . $emit ( 'reportEvent' , desc)
}
} else if ( this . voteShow == false && this . ticketShow == false ) {
desc = '身份+阅读页'
this . $emit ( 'reportEvent' , desc)
let touchStart
this . swiper. slides. on ( 'touchstart' , function ( e) {
touchStart = e. targetTouches[ 0 ] . pageY;
} , true ) ;
this . swiper. slides. on ( 'touchmove' , function ( e) {
this . current = e. targetTouches[ 0 ] . pageY;
let touchesDiff = this . current - touchStart;
if ( touchesDiff < - 130 ) {
location. href = `https://youxi.vip.qq.com/m/act/60f344f2c8_tencentanime_611453.html?ADTAG=event.611453.kaiqiye`
}
} , true )
} else {
if ( index == 2 ) {
desc = '月票页'
this . $emit ( 'reportEvent' , desc)
let touchStart
this . swiper. slides. on ( 'touchstart' , function ( e) {
touchStart = e. targetTouches[ 0 ] . pageY;
} , true ) ;
this . swiper. slides. on ( 'touchmove' , function ( e) {
this . current = e. targetTouches[ 0 ] . pageY;
let touchesDiff = this . current - touchStart;
if ( touchesDiff < - 130 ) {
location. href = `https://youxi.vip.qq.com/m/act/60f344f2c8_tencentanime_611453.html?ADTAG=event.611453.kaiqiye`
}
} , true )
} else if ( index == 1 ) {
desc = '解锁页'
this . $emit ( 'reportEvent' , desc)
} else {
desc = '身份+阅读页'
this . $emit ( 'reportEvent' , desc)
}
}
} ,
onePageReport ( ) {
let desc
desc = '身份+阅读页'
this . $emit ( 'reportEvent' , desc)
let touchStart
this . swiper. slides. on ( 'touchstart' , function ( e) {
touchStart = e. targetTouches[ 0 ] . pageY;
} , true ) ;
this . swiper. slides. on ( 'touchmove' , function ( e) {
this . current = e. targetTouches[ 0 ] . pageY;
let touchesDiff = this . current - touchStart;
if ( touchesDiff < - 130 ) {
location. href = `https://youxi.vip.qq.com/m/act/60f344f2c8_tencentanime_611453.html?ADTAG=event.611453.kaiqiye`
}
} , true )
} ,
handlerSwiper ( ) {
let startScroll, touchStart, touchCurrent;
this . swiper. slides. on ( 'touchstart' , function ( e) {
startScroll = this . scrollTop;
touchStart = e. targetTouches[ 0 ] . pageY;
} , true ) ;
this . swiper. slides. on ( 'touchmove' , function ( e) {
touchCurrent = e. targetTouches[ 0 ] . pageY;
let touchesDiff = touchCurrent - touchStart;
console. log ( touchesDiff, '3333' )
let slide = this ;
let onlyScrolling =
( slide. scrollHeight > slide. offsetHeight) &&
(
( touchesDiff < 0 && startScroll === 0 ) ||
( touchesDiff > 0 && startScroll === ( slide. scrollHeight - slide. offsetHeight) ) ||
( startScroll > 0 && startScroll < ( slide. scrollHeight - slide. offsetHeight) )
) ;
if ( onlyScrolling) {
e. stopPropagation ( ) ;
}
} , true ) ;
} ,
} ,
computed: {
swiper ( ) {
return this . $refs. mySwiper. swiper
}
} ,
watch: {
} ,
async mounted ( ) {
this . handlerSwiper ( ) ;
if ( this . ticket_consume_info. total_num == 0 ) {
this . ticketShow = false
} else {
this . ticketShow = true
}
if ( this . vote_info. total_vote_num == 0 ) {
this . voteShow = false
} else {
this . voteShow = true
}
if ( this . onePage == 1 ) {
this . onePageReport ( )
}
} ,
} ;
< / script>