Swiper 缩略图第一张图无法自动选中问题

原创
前端路迹
2022-8-10 08:00
编辑于 2022-8-11 18:24

swiper 官方缩略图示例。

https://swiperjs.com/demos#thumbs-gallery

打开 Vue3 示例,官方示例跑起来后可以看到第一张是选中的。

此时我们将 slide 改为动态数据,而不是固定的。

const list = reactive([
    'https://swiperjs.com/demos/images/nature-1.jpg',
    'https://swiperjs.com/demos/images/nature-2.jpg',
    'https://swiperjs.com/demos/images/nature-3.jpg',
    'https://swiperjs.com/demos/images/nature-4.jpg',
    'https://swiperjs.com/demos/images/nature-5.jpg',
])
<swiper-slide v-for="item in list" :key="item"><img :src="item" /></swiper-slide>

调整为动态数据,第一个缩略图仍然是选中的状态。接着再把 list 的数据改为延迟赋值(模拟接口返回的场景)。

此时发现,第一张没有默认选中了,点击第一张也不行,只能点击后面的,再点击第一张才能变为选中状态。


const list = reactive([])
setTimeout(function () {
    list.push(
        'https://swiperjs.com/demos/images/nature-1.jpg',
        'https://swiperjs.com/demos/images/nature-2.jpg',
        'https://swiperjs.com/demos/images/nature-3.jpg',
        'https://swiperjs.com/demos/images/nature-4.jpg',
        'https://swiperjs.com/demos/images/nature-5.jpg'
    )
}, 1000)

通过查找文档,发现可以调用缩略图模块的 update 方法来更新选中。

let mainSwiper = null
const setMainSwiper = (swiper) => {
    mainSwiper = swiper
}
setTimeout(function () {
    list.push(
        'https://swiperjs.com/demos/images/nature-1.jpg',
        'https://swiperjs.com/demos/images/nature-2.jpg',
        'https://swiperjs.com/demos/images/nature-3.jpg',
        'https://swiperjs.com/demos/images/nature-4.jpg',
        'https://swiperjs.com/demos/images/nature-5.jpg'
    )
    nextTick(function () {
        mainSwiper.thumbs.update()
    })
}, 1000)

测试以上方案可以让缩略图第一张选中。

转载请注明出处。本文地址: https://www.qinshenxue.com/article/swiper-introduction.html
关注 & 咨询问题