在用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框架的时候,怎样在第一屏的时候,阻止滑动事件的主要内容,如果未能解决你的问题,请参考以下文章

JS点击左右键滚动中间内容怎么做呢。找了好多案例都不好改

swiper怎么阻止第一屏向右滑动,不然会出现左边留白的问题

请问在用swiper做手机页面的时候如何设置页面高度随着显示内容而变化?谢谢了,大神帮忙啊

swiper里面的,tab切换,不同的slide高度不一样,外层高度何如随之改变,如果里面的每一屏的高度不一样,那么就会一直以高度最大的一个座位最外层的高度,总成了页面内容少的那一页有很大空白,改如何

CSS3动画如何设置滑动到当屏的时候才触发动画播放

如何设置jquery fullpage每一屏的大小