framework7框架访问地址:https://framework7.io/vue/swiper.html
Swiper API : http://idangero.us/swiper/api/
本代码使用framework7+vue框架，使用了Swiper API来解决轮播滑动问题。
一开始代码是这样的，注意示例不能运行，调试时发现，页面加载出来的时候图片可以轮播，但是手动滑动之后，页面的图片不再自动轮播。
...
<f7-swiper v-if="bannerList.length" :params="swiperParams" pagination ref="mySwiper">
<f7-swiper-slide v-for="banner in bannerList" :key="banner.id">
</f7-swiper-slide>
</f7-swiper>
<script>
export default {
data () {
swiperParams: {
speed: 500,
loop: true,
autoplay: {
delay: 2500,
},
preventLinksPropagation: false // 阻止点击事件冒泡
},
}
}
</script>
官网示例是这样的,f7引用的格式不一样，但是配置方法是一致的。
var mySwiper = new Swiper('.swiper-container', {
speed: 500,
loop: true,
autoplay: {
delay: 2500,
}
...
});
然后查询官方Swiper API : http://idangero.us/swiper/api/，通过慢慢摸索，找到了一个可以解决手动滑动后，自动滑动失效问题。
image.png
属性名：disableOnInteraction：
属性值：boolean true
解释：Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction
中文意思就是：当disableOnInteraction:false 的时候，手动滑动之后，自动滑动不会失效，每次手动滑动之后，自动滑动会再开启。
修改后的代码：
注意：disableOnInteraction是autoplay的属性。
<f7-swiper v-if="bannerList.length" :params="swiperParams" pagination ref="mySwiper">
<f7-swiper-slide v-for="banner in bannerList" :key="banner.id">
</f7-swiper-slide>
</f7-swiper>
<script>
export default {
data () {
swiperParams: {
speed: 500,
loop: true,
autoplay: {
disableOnInteraction: false,
delay: 2500,
},
preventLinksPropagation: false // 阻止点击事件冒泡
},
}
}
</script>
官方示例写法：
var mySwiper = new Swiper('.swiper-container', {
speed: 500,
loop: true,
autoplay: {
disableOnInteraction: false,
delay: 2500,
}
...
});
