Swiper.js调用swiper.scrollbar.updateSize()报undefined错误原因查询

该错误的核心是调用swiper.scrollbar.updateSize()时，Swiper实例的scrollbar属性为undefined，没有对应实例所以无法调用方法，具体触发场景分为三类：

• 未正确注册滚动条模块：Swiper 6.x 版本中滚动条属于可选功能模块，如果你是用npm模块化方式引入Swiper，没有单独导入并注册Scrollbar模块的话，Swiper不会初始化滚动条实例，该属性自然为空。如果是用CDN引入完整Swiper包则不会出现该问题。
• DOM加载顺序错误：你的swiper.js文件引入位置早于页面DOM元素加载，执行初始化代码时页面还没有渲染出.swiper-scrollbar对应元素，Swiper找不到滚动条容器，就不会初始化scrollbar实例。
• 方法调用时机错误：Swiper初始化是异步过程，你在new Swiper代码之后同步调用updateSize方法时，滚动条实例还没有挂载到Swiper实例上，此时读取属性就是undefined。

对应解决方案 #

1. 模块化引入的场景补充滚动条模块注册代码：

import Swiper, { Scrollbar } from 'swiper';
Swiper.use([Scrollbar]);

2. 调整代码执行时机：把swiper.js的引入放在</body>闭合标签之前，或者把初始化逻辑包裹在DOM加载完成的回调中：

document.addEventListener('DOMContentLoaded', function() {
  var swiper = new Swiper('.swiper-container', {
    // 你的原有配置
  });
})

3. 调整updateSize调用逻辑：正常初始化场景下Swiper会自动计算滚动条尺寸，不需要手动调用该方法，你可以直接删除swiper.scrollbar.updateSize();这行代码。如果确实需要在动态修改轮播内容后更新滚动条，要把调用逻辑放在Swiper的init事件回调中：

var swiper = new Swiper('.swiper-container', {
  // 原有配置
  on: {
    init: function () {
      this.scrollbar.updateSize();
    }
  }
});

内容的提问来源于stack exchange，提问作者user16632118