vue-awesome-swiper和swiper 一页半

1,407 阅读1分钟

有一页半的设计时候, 【不要使用vue-awesome-swiper,不要使用vue-awesome-swiper,不要使用vue-awesome-swiper】, 因为swiper的touchmove事件中e.stopPropagation()无效。需要你自己定义touchmove去处理还要结合swiper禁止翻页属性,实现超过一页的滑动,最终效果不是很完美!

解决方法,直接使用swiper就可以(如下)

<template>    <div class="main">        <div class="swiper-container">            <div class="swiper-wrapper">                <div class="swiper-slide">                    <div cd="P1" class="page page_1">                        <img src="https://res.smzdm.com/h5/h5_zdm_business/dist/img/2020shangye/header.png?v=2" alt="">                    </div>                </div>                <div class="swiper-slide">                    <div cd="P2" class="page page_2">                        <img height="1000" src="https://res.smzdm.com/h5/h5_zdm_business/dist/img/2020shangye/2.png?v=2" alt="">                        <img src="https://res.smzdm.com/h5/h5_zdm_business/dist/img/2020shangye/3.png?v=2" alt="">                    </div>                </div>                <div class="swiper-slide">1122211</div>            </div>        </div>    </div></template><script>    import Swiper from 'swiper';    import 'swiper/dist/css/swiper.min.css';    export default {        data () {            return {                activeIndex: 0            };        },        computed: {            swiper () {                return this.$refs.mySwiper.swiper;            }        },        mounted () {            var mySwiper = new Swiper('.swiper-container', {                direction: 'vertical'            });            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) && ((touchesDiff < 0 && startScroll === 0) || (touchesDiff > 0 && startScroll === (slide.scrollHeight - slide.offsetHeight)) || (startScroll > 0 && startScroll < (slide.scrollHeight - slide.offsetHeight)));                if (onlyScrolling) {                    e.stopPropagation();                }            }, true);        }    };</script><style lang="scss">html,body {    width: 100%;    height: 100%;    padding: 0;    margin: 0;}.main {    height: 100%;    width: 100%;}.swiper-container {    width: 100%;    height: 100%;    background: red;}.swiper-slide {    // max-width: 750px;    height: 100%;    color: #000;    text-align: center;    overflow-y: auto;    overflow-x: auto;    -webkit-overflow-scrolling: touch;}.page {    min-height: 100%;    width: 100%;}.page img {    width: 100%;    display: block;}</style>