第1个回答 2022-07-14
1.使用方法
<template>
<Swiper
:options="swiperOption"
:style="{ height: setHeight }"
@slideChange="onSlideChange"
>
<SwiperSlide class="slide">page1</SwiperSlide>
<SwiperSlide class="slide">page2</SwiperSlide>
<SwiperSlide class="slide">page3</SwiperSlide>
</Swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
export default {
components: {
Swiper: swiper,
SwiperSlide: swiperSlide,
},
data() {
let vm = this;
return {
swiperOption: {
direction: 'vertical',
initialSlide: 0,
on: {
init() {
vm.$swiper = this;
},
},
},
setHeight:
document.documentElement.clientHeight || document.body.clientHeight,
};
},
created() {
this.setHeight =
document.documentElement.clientHeight || document.body.clientHeight;
this.handlerSwiper();
},
methods: {
onSlideChange() {
let pageIndex = this.$swiper.activeIndex;
switch (pageIndex) {
case 0:
// ...
break;
case 1:
// ...
break;
case 2:
// ...
break;
}
},
handlerSwiper() {
let startScroll, touchStart, touchCurrent;
this.$nextTick(() => {
this.$swiper.slides.on(
'touchstart',
function (e) {
startScroll = Math.floor(this.scrollTop); // 针对安卓获取到小数进行向下取整
touchStart = e.targetTouches[0].pageY;
},
true,
);
this.$swiper.slides.on(
'touchmove',
function (e) {
touchCurrent = e.targetTouches[0].pageY;
let touchesDiff = touchCurrent - touchStart;
let slide = this;
let onlyScrolling =
slide.scrollHeight > slide.offsetHeight && //allow only when slide is scrollable
((touchesDiff < 0 && startScroll === 0) || //start from top edge to scroll bottom
(touchesDiff > 0 &&
startScroll === slide.scrollHeight - slide.offsetHeight) || //start from bottom edge to scroll top
(startScroll > 0 &&
startScroll < slide.scrollHeight - slide.offsetHeight)); //start from the middle
if (onlyScrolling) {
e.stopPropagation();
}
},
true,
);
});
},
},
};
</script>
<style scoped>
body {
overflow: hidden;
}
.swiper-container {
width: 100%;
}
.swiper-slide {
overflow: scroll;
background: #00f;
height: 1000px; /* 高度由内容填充后删掉 */
}
</style>
2.解决swiper在微信开发者工具无法滑动：