swiper 初始化第一时间获取元素undefined

Question

按道理说初始化回调init执行了说明swiper已应该加载好了，但是获取到的却是undefined，加个定时器又正常了，这是什么问题？

html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>

JavaScript

window.onload = () => {
    new Swiper('.swiper-container', {
        // loop: true,
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        on: {
            init() {
                console.log('初始化完成？')
                console.log(this.navigation.nextEl) //undefined

                setTimeout(() => {
                    console.log(this.navigation.nextEl); //object
                }, 10)
            }
        }
    })
}

第一时间为什么会输出 undefined

这是官网init的 demo

Answer 1

你好朋友，官方建议这样调用：mySwiper.navigation.$prevEl