问题:
- swiper开启loop后,总是有一组内容空白,手势按上去轻微滑动一下后就展示,主动执行update方法也不行
- swiper4在低版本webview空白
问题1 解决方案:
参考自vue-awesome-swiper
在使用swiper的页面增加代码
activated() {
this.update()
},
updated() {
this.update()
},
methods: {
autoReLoop() {
// this.swiper 为new Swiper() 返回的swiper对象,请自行存储
if (this.swiper && this.swiperOptions.loop) {
// https://github.com/surmon-china/vue-awesome-swiper/issues/593
// https://github.com/surmon-china/vue-awesome-swiper/issues/544
// https://github.com/surmon-china/vue-awesome-swiper/pull/545/files
const swiper = this.swiper
swiper?.loopDestroy?.()
swiper?.loopCreate?.()
}
},
update() {
if (this.swiper) {
this.autoReLoop()
this.swiper?.update?.()
this.swiper.navigation?.update?.()
this.swiper.pagination?.render?.()
this.swiper.pagination?.update?.()
}
},
},
参考源码:vue-awesome-swiper/swiper.vue
问题2解决方案:
将引入Swiper的代码
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
// 改为
import Swiper from 'swiper/dist/js/swiper.min.js'
import 'swiper/dist/css/swiper.css'