vue-awesome-swiper轮播插件的使用

//直接安装版本3即可，自动会选择3.1.3版本
npm i vue-awesome-swiper@3 -S
//或者手动指定
npm i vue-awesome-swiper@3.1.3 -S

//全局引入，在vue-page-base.js
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,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
                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,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
                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>