swiper在vue中使用，纵向滚动翻页，超出一屏的解决方案

Posted 2023-03-09

参考技术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在微信开发者工具无法滑动：