vue使用Swiper内容过长bug

最新推荐文章于 2023-07-28 10:45:44 发布

十安十里

最新推荐文章于 2023-07-28 10:45:44 发布

阅读量367

点赞数 1

文章标签： vue.js bug javascript

本文链接：https://blog.csdn.net/weixin_54447214/article/details/130857859

版权

项目场景：

例如：利用Swiper实现手机端的滑动 swiper中文网站

问题描述

例如：有的页面内容大于屏幕长度，但Swiper默认对滚动条是不适配的。

官网给出的解决方案

@Override
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .swiper-container {
            width: 100%;
            height: 100vh;
        }  
        .swiper-slide{
            background-color: red;
        }
        .slides1{
            /* height: 100px; */
            /* overflow: scroll; */
        }
        .slides2{
            /* height: 200px; */
        }
        .slides3{
            /* height: 300px; */
        }
        .item{
            height: 29vh;
        }
        /* .swiper-slide2{
            height: 900px;
        } */
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
</head>
<body>
    
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="slides2">你好2</div>
            </div>
            <div class="swiper-slide" style="overflow-y: auto;" id="page2">
                <div class="slides1">
                    <div class="item" style="background-color: blue;">blue</div>
                    <div class="item" style="background-color: yellow;">yellow</div>
                    <div class="item" style="background-color: gray">测试</div>
                    <div class="item" style="background-color: #288545">测试</div>
                    <div class="item" style="background-color: gray">测试</div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slides3">你好3</div>
            </div>
        </div>
    </div>
    <script>
        let page2 = document.querySelector("#page2")
        var mySwiper = new Swiper ('.swiper-container', {
                direction: 'vertical', // （vertical）垂直切换选项  horizontal（水平） 
                // loop: true, // 循环模式选项
                // autoplay:true, //可选选项，自动滑动
                // initialSlide: 0, // 初始化索引
                // speed: 3000, // 切换速度，即slider自动滑动开始到结束的时间
                // grabCursor: true, // 小手
                autoHeight: true, // 自动高度
        })  

        var startScroll, touchStart, touchCurrent;
        
        mySwiper.slides.on('touchstart', function (e) {
                startScroll = this.scrollTop;
                touchStart = e.targetTouches[0].pageY;
        }, true);

        mySwiper.slides.on('touchmove', function (e) {
            touchCurrent = e.targetTouches[0].pageY;
            var touchesDiff = touchCurrent - touchStart;
            var slide = this;
            var 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>
    
</body>
</html>

问题二：

例如：如果你是在vue中想解决跟上面一样的解决问题，因为Swiper的事件处理机制与Vue的事件处理机制不同导致的。在Swiper中，事件处理程序是使用原生JavaScript编写的，而不是Vue组件的事件处理程序。

<template>
    <Swiper :options="swiperOption">
        <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;   // vue的事务机制
    return {
      swiperOption: {
        direction: "vertical",
        initialSlide: 0,
        on: {
          init() {
            vm.$swiper = this;   // swiper的事件机制(this)
          },
        },
      },
    };
  },

  created() {
    this.handlerSwiper();
  },

  methods: {
    handlerSwiper() {
     		let that = this
     		let startScroll, touchStart, touchCurrent;
            
            that.$swiper.on('slideChange', () => {
                that.curPage1 = that.$swiper.realIndex + 1;      
            });

            that.$swiper.slides.on("touchstart",
                function (e) {
                    if(that.curPage1 != 5) return
                    startScroll = Math.floor(this.scrollTop); // 针对安卓获取到小数进行向下取整
                    touchStart = e.targetTouches[0].pageY;
                },
                true
            );

            that.$swiper.slides.on( "touchmove",
                function (e) {
                    if(that.curPage1 != 5) return
                    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
            );
    },
};