Use element's pagination to control swiper jump

page-size: how many pieces of data are displayed on one page
total: how many pieces of data in total

<template>
  <div>
    <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>
    </div>

    <div>
      <el-pagination layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     :page-size="3"
                     :total="60">
      </el-pagination>
    </div>
  </div>

</template>

handleCurrentChange (currentpage) {
    
    
 this.$refs.swiper.swiper.slideTo(currentpage - 1, 500, false);
},

Guess you like

Origin blog.csdn.net/yuyu_2019/article/details/112008573