vue-awesome-swiper slideTo 点击外部控制切换到某一页

最新推荐文章于 2025-05-30 11:32:12 发布

原创最新推荐文章于 2025-05-30 11:32:12 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

Swiper 专栏收录该内容

4 篇文章

订阅专栏

这篇博客展示了如何在Vue应用中利用Swiper组件进行页面切换。通过`swiperOption`配置滑动效果，并在`switchPage`方法中调用`slideTo`函数，实现了在500毫秒内平滑跳转到第3个幻灯片。同时，内容中包含了一个使用`v-for`指令遍历数据并展示的示例。

this.$refs.swiper.swiper.slideTo(2, 500, false);

<template>
  <div>
    <swiper ref="swiper"
            :options="swiperOption"
            style="height:100px">
      <swiper-slide v-for='(item,index) in newObjData'
                    :key="index">
        <li v-for='(item,index) in newObjData[index]'
            :key="index">
          <span>{{item.id}}</span>
          <span>{{item.name}}</span>
          <span>{{item.age}}</span>
        </li>
      </swiper-slide>
    </swiper>
    <button @click="switchPage">切换页码</button>
  </div>
</template>

switchPage () {
 this.$refs.swiper.swiper.slideTo(2, 500, false);
},