swiper开启loop后有一组内容空白,swiper4在低版本webview空白

问题:

  1. swiper开启loop后,总是有一组内容空白,手势按上去轻微滑动一下后就展示,主动执行update方法也不行
  2. 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'

你可能感兴趣的:(vue.js,javascript,前端,swiper)