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

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

废话不啰嗦，上图为敬

因为我是vite构建的v3项目，使用官方示例Demo， npm install 之后运行，上来就报错

然后查看了配置文件 vite.config.js 添加 resolve.alias ，如下

接着我还需要拷贝一份dist到我项目中，想想哪里不对，我肯定是被文档带偏了，我明明是npm 引入库的方式，这是要我马路上扛着自行车奔跑嘛不是，放弃。

再回到官方迅含手文档，找到了API方法

试了不行，打印swiper传参params等参数，凡是能改 direction 属性的，都试了，滚动一页，然后其他页面不见了，再次放弃。

放弃了查看官方文档，跑去翻墙看博客，似乎发现了惊喜，然后一顿 *** 作，垂直滚动的效果有了，但是滚动了一页就再也不能滚动了是什么意思。

然后继续回到swiper官方文档，思考着是不是需要JS创建swiper才行能，继续尝试，无果。

然后去 github 上找找灵感，发现了哪位大佬写的 vue-awesome-swiper ，安装继续尝试，不行，发现极少维护了，也没有对swiper 7.3.2做支持，放弃。

继续翻墙，再次发现了什么，一评论区的小菜给 swiper ，swiper-slide 加了固定宽度，就这样，有了！！！

感谢小菜，远离大佬，珍爱生命。

到此，距离解决问题已经过去了12个小时，期间茶水不思，头发掉了若干。

打老敬工人打工亩嫌魂，十年打工人上人。

点赞加关注，永远不迷路

---