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

最新推荐文章于 2024-08-20 11:29:48 发布

阿髙

最新推荐文章于 2024-08-20 11:29:48 发布

阅读量740

点赞数 2

文章标签： vue.js javascript 前端 swiper

本文链接：https://blog.csdn.net/weixin_43515759/article/details/130600352

版权

文章主要讨论了在使用Swiper4时遇到的问题，当开启loop模式后，可能会出现一组内容空白的情况，特别是在低版本的Webview中。为了解决这个问题，提出了两种解决方案：一是通过在Vue组件的生命周期钩子中调用`update`方法以及执行loop的相关操作；二是改变Swiper的导入方式，从完整库改为只导入js的min版。这些方法可以帮助修复Swiper在特定环境下的显示问题。

摘要由CSDN通过智能技术生成

问题：

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'