单页多Splide.js滑块添加进度条报Cannot read properties of null错如何解决

代码插入逻辑 #

进度条事件绑定代码需放在获取进度条DOM节点之后、滑块挂载执行之前，同时增加非空判断解决空引用报错：

1. 原报错原因：对应滑块容器内未匹配到.my-slider-progress-bar元素，导致bar变量为null时调用style属性触发异常
2. 插入位置：var bar = ...语句之后，splide.mount()语句之前

完整可运行代码 #

var splides = $('.highlights');

function slider1() {
  for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
    var splide = new Splide( splides[ i ], {
      gap: '2.4em',
      autoWidth: true,
      waitForTransition: true,
      breakpoints: {
        991: {},
        767: {
          destroy: true,
        },
        479: {
          destroy: 'completely',
        }
      }
    });
  
    var bar = splide.root.querySelector( '.my-slider-progress-bar' );
    
    // 进度条逻辑插入位置，增加非空判断避免报错
    if (bar) {
      splide.on( 'mounted move', function () {
        var end = splide.Components.Controller.getEnd() + 1;
        bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
      } );
    }
    
    splide.mount();
  }
}

slider1();

DOM结构要求 #

每个.highlights滑块容器内需包含对应进度条元素，参考结构：

<div class="highlights">
  <div class="splide__track">
    <ul class="splide__list">
      <!-- 滑块项内容 -->
    </ul>
  </div>
  <!-- 对应滑块的进度条结构 -->
  <div class="my-slider-progress">
    <div class="my-slider-progress-bar"></div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Tomáš Mrázek