在用swiper框架的时候,怎样在第一屏的时候,阻止滑动事件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在用swiper框架的时候,怎样在第一屏的时候,阻止滑动事件相关的知识,希望对你有一定的参考价值。
参考技术A 你如果设置了slidesPerview就需要为loopedSlides设置一个值。 示例: loop : true, slidesPerView : 'auto', loopedSlides :8,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框架的时候,怎样在第一屏的时候,阻止滑动事件的主要内容,如果未能解决你的问题,请参考以下文章
swiper怎么阻止第一屏向右滑动,不然会出现左边留白的问题
请问在用swiper做手机页面的时候如何设置页面高度随着显示内容而变化?谢谢了,大神帮忙啊
swiper里面的,tab切换,不同的slide高度不一样,外层高度何如随之改变,如果里面的每一屏的高度不一样,那么就会一直以高度最大的一个座位最外层的高度,总成了页面内容少的那一页有很大空白,改如何