有一页半的设计时候, 【不要使用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>