when swiper down , trigger ptr-contet refresh event
how to solve it ?
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left"><a href="#" class="link back"></a></div>
<div class="title">Component Page</div>
</div>
</div>
<div class="page-content ptr-content" @ptr:refresh=${loadMore}>
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
<div class="swiper-container" style="width: 100%;height: 100%">
<!-- Slides wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
</div>
</div>
</div>
</template>
<style>
.swiper-slide {
width: 100vw;
height: 100vw;
background-color: white;
}
</style>
<script>
export default function (props, { $on }) {
let swiper = null;
let currentActiveIndex = 0;
const loadMore = (e,done) => {
setTimeout(() => {
done();
},2000);
}
$on('pageInit', (e, page) => {
swiper = app.swiper.create('.swiper-container',{
spaceBetween: 10,
slidesPerView:'auto',
direction:'vertical',
freeMode: true,
freeModeSticky:true,
on:{
activeIndexChange:function (s){
$(s.slides[currentActiveIndex]).css({"backgroundColor":"white"});
currentActiveIndex = s.activeIndex;
},
slideChangeTransitionEnd:function (s){
$(s.slides[currentActiveIndex]).css({"backgroundColor":"red"});
}
}
});
});
// Return render function
return $render;
}
</script>