vue.js 3.2.6 解决swiper动态加载数据时默认显示最后一页(swiper@6.8.4)

一，关于(swiper动态加载数据时默认显示最后一页)网上的一些解决方法:

网上的主要的解决方法有两个:

1是指定v-if为图片数量，当图片数量大于时才生成swiper,
 在swiper@6.8.4这个版本无效
2,在加载完数据后，用transform指定第一页的内容移动一定的距离，

  例子：

          setTimeout(() => {
            document.getElementsByClassName('swiper-wrapper')[0].style.transform = 'translate3d(-375px, 0px, 0px)'
          }, 50)

   这个有效，但下面的Pagination指示器无效,而且用户手动滑动时会出现不正常的移动

   这个改动方法不够好

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，编写代码：

解决方法：

    const onSwiper = (swiper) => {
      console.log('-----onSwiper begin slideTo:')
      swiper.updateSlides();
      swiper.slideTo(1, 0, false);
    }

指定滑动到第一页就行了

例子:

Home.vue

<template>
  <div style="100%;height:100%;background: #00ff00;" ref="topdiv">
    <swiper @swiper="onSwiper"
            :autoplay="swiper_options.autoplay"
            :loop="swiper_options.loop"
            :speed="swiper_options.speed"
            :pagination="{ clickable: true }"
            :style="{height:swiperHeight+'px',background:'#ff0000'}">
      <template v-for="(slideItem,i) in slides" :key="i">
        <swiper-slide>
          <div style="100%;height:100%;display: flex;justify-content: center;align-items: center;">
            <img  :src="slideItem.homeSlideUrl" alt="" style="max-height: 100%;max- 100%;">
          </div>
        </swiper-slide>
      </template>
    </swiper>
<div style="display:flex;flex-direction: column;100%;">
  <template v-for="(homeItem,i) in homes" :key="i">
    <div style="100%;position:relative;">
      <img :src="homeItem.homeBackUrl" style="100%;" />
      <!--当前模块:{{homeId}}<br/>-->
      <template v-for="(item,k) in homeItem.homeContentList" :key="k" >
        <div v-if="item.ptype===6" @click="golink(item.linkId)" :id="item.globalIndex" :style="{'opacity':'0.5','position':'absolute',left:(item.pleft/100)+'rem',top:(item.ptop/100)+'rem','width':(item.pwidth/100)+'rem','height':(item.pheight/100)+'rem','background':'#ff0000',}">
        </div>
        <div v-if="item.ptype===4" :id="item.globalIndex" :style="{background:'url('+item.videoCoverUrl+')','background-size':'100% auto','background-repeat':'no-repeat','position':'absolute',left:(item.pleft/100)+'rem',top:(item.ptop/100)+'rem','width':(item.pwidth/100)+'rem','height':(item.pheight/100)+'rem',}">
          <video :style="{'width':(item.pwidth/100)+'rem', 'height':(item.pheight/100)+'rem', background: '#ffffff'}"
                 muted="" autoplay="" playsinline="" webkit-playsinline=""
                 :poster="item.videoCoverUrl"
                 :src="item.videoUrl" controls="">
          </video>
        </div>
        <div v-if="item.ptype===5" @click="golink(item.linkId)" :id="item.globalIndex"
             :style="{background:'url('+item.imageUrl+')','background-size':'100% auto','background-repeat':'no-repeat','position':'absolute',left:(item.pleft/100)+'rem',top:(item.ptop/100)+'rem','width':(item.pwidth/100)+'rem','height':(item.pheight/100)+'rem',}">
        </div>
      </template>
    </div>
  </template>
</div>
  </div>
</template>

<script>
//,watch,nextTick
import { ref,reactive,onMounted} from "vue";
import {apiHome} from "../../api/api";

//引入swiper
import SwiperCore, { Autoplay, Pagination, EffectCoverflow,Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.less";
import "swiper/components/navigation/navigation.less";
//设置swiper
SwiperCore.use([Autoplay, Pagination, EffectCoverflow,Navigation]);

export default {
  name: "Home",
    components: {
      Swiper,
      SwiperSlide,
    },
  setup() {
    //保存用户数据的变量
    const msg = ref("");
    const domain = ref("");
    const loading = ref(true);
    const slides = ref([]);
    const homes = ref([]);
    const onSwiper = (swiper) => {
      console.log('-----onSwiper begin slideTo:')
      swiper.updateSlides();
      swiper.slideTo(1, 0, false);
    }

    //从接口获取用户信息
    const info = async () => {
      apiHome({
      }).then(res => {
        if (res.code == 0) {
          slides.value = res.data.slide;
          homes.value = res.data.list;
        }
      }).catch((error) => {
        console.log(error)
      })
    };
    info();

    //指定swiper的设置
    let swiper_options = reactive({
      initialSlide :1,
      autoplay:{
        delay:2000,
        disableOnInteraction: false
      },
      loop:true,
      speed:1000,
      autoHeight:true,
      pagination:{
        clickable: true
      },
    })

    const topdiv=ref(null);
    //指定swiper的高度，设置为宽度的62%
    const swiperHeight = ref(0);
    onMounted(() => {
      let width = topdiv.value.getBoundingClientRect().width;
      swiperHeight.value = width * 0.62;
    });

    const golink = (linkId) => {
      alert("商品Id:"+linkId);
    }

    return {
      info,
      msg,
      domain,
      loading,
      swiper_options,
      topdiv,
      swiperHeight,
      slides,
      homes,
      golink,
      onSwiper,
    };
  }
}
</script>

<style>
/*分页用的圆点*/
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  opacity: 0.6;

}
/*分页用的圆点激活时*/
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}

</style>

三，测试效果

页面加载动态数据后swiper默认显示最后一页:

用slideTo指定后,默认显示第一页:

四，查看vue的版本:

liuhongdi@lhdpc:/data/vue/storeweb$ npm list vue
storeweb@0.1.0 /data/vue/storeweb
├─┬ @vue/cli-plugin-babel@4.5.13
│ └─┬ @vue/babel-preset-app@4.5.13
│   └── vue@3.2.6 deduped
├─┬ element-plus@1.1.0-beta.7
│ └── vue@3.2.6 deduped
├─┬ vue-router@4.0.11
│ └── vue@3.2.6 deduped
├── vue@3.2.6
└─┬ vue3-carousel@0.1.27
  └── vue@3.2.6 deduped

查看swiper的版本:

liuhongdi@lhdpc:/data/vue/storeweb$ npm list swiper
storeweb@0.1.0 /data/vue/storeweb
└── swiper@6.8.4