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中使用,纵向滚动翻页,超出一屏的解决方案的主要内容,如果未能解决你的问题,请参考以下文章

swiper 内容超出纵向滚动 解决办法

【web前端】ios上使用swiper 在自动翻页时出现白色闪屏的解决

2022-02-20 Vue中使用swiper,上下翻页和分页器自定义

在用swiper框架的时候,怎样在第一屏的时候,阻止滑动事件

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

vue-awesome-swiper - 基于vue实现h5滑动翻页效果