swiper在vue中使用,纵向滚动翻页,超出一屏的解决方案
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper在vue中使用,纵向滚动翻页,超出一屏的解决方案相关的知识,希望对你有一定的参考价值。
参考技术A 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在微信开发者工具无法滑动:
以上是关于swiper在vue中使用,纵向滚动翻页,超出一屏的解决方案的主要内容,如果未能解决你的问题,请参考以下文章
【web前端】ios上使用swiper 在自动翻页时出现白色闪屏的解决
2022-02-20 Vue中使用swiper,上下翻页和分页器自定义
在用swiper框架的时候,怎样在第一屏的时候,阻止滑动事件