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>
类似资料：