Project scenario:
For example: use Swiper to realize sliding on the mobile phone swiper Chinese website
Description of the problem
For example: Some page content is larger than the screen length, but Swiper is not suitable for scroll bars by default.
The solution given by the official website
@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="//i2.wp.com/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">Hello 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">test</div>
<div class="item" style="background-color: #288545">Test</div>
<div class="item" style="background-color: gray">test</div>
</div>
</div>
<div class="swiper-slide">
<div class="slides3">Hello 3</div>
</div>
</div>
</div>
<script>
let page2 = document. querySelector("#page2")
var mySwiper = new Swiper ('.swiper-container', {<!-- -->
direction: 'vertical', // (vertical) vertical switch option horizontal (horizontal)
// loop: true, // loop mode option
// autoplay: true, // optional option, automatic sliding
// initialSlide: 0, // Initialize the index
// speed: 3000, // switching speed, that is, the time from the beginning to the end of the automatic sliding of the slider
// grabCursor: true, // small hands
autoHeight: true, // auto height
})
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 ) & amp; & amp; //allow only when slide is scrollable
(
( touchesDiff < 0 & amp; & amp; startScroll === 0 ) || //start from top edge to scroll bottom
( touchesDiff > 0 & amp; & amp; startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || //start from bottom edge to scroll top
( startScroll > 0 & amp; & amp; startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) //start from the middle
);
if (onlyScrolling) {<!-- -->
e. stopPropagation();
}
}, true);
</script>
</body>
</html>
Question 2:
For example: If you want to solve the same problem as above in vue, it is because Swiper’s event handling mechanism is different from Vue’s event handling mechanism. In Swiper, event handlers are written in vanilla JavaScript, not Vue component event handlers.
<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's transaction mechanism
return {<!-- -->
swiperOption: {<!-- -->
direction: "vertical",
initialSlide: 0,
on: {<!-- -->
init() {<!-- -->
vm.$swiper = this; // event mechanism of 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); // round down for the decimal obtained by Android
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 & amp; & amp; //allow only when slide is scrollable
(
(touchesDiff < 0 & amp; & amp; startScroll === 0) || //start from top edge to scroll bottom
(touchesDiff > 0 & amp; & amp; startScroll === (slide.scrollHeight - slide.offsetHeight)) || //start from bottom edge to scroll top
(startScroll > 0 & amp; & amp; (startScroll < slide.scrollHeight - slide.offsetHeight)) //start from the middle
);
if (onlyScrolling) {<!-- -->
e. stopPropagation();
}
},
true
);
},
};