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="width: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="width:100%;height:100%;display: flex;justify-content: center;align-items: center;">
<img :src="slideItem.homeSlideUrl" alt="" style="max-height: 100%;max-width: 100%;">
</div>
</swiper-slide>
</template>
</swiper>
<div style="display:flex;flex-direction: column;width:100%;">
<template v-for="(homeItem,i) in homes" :key="i">
<div style="width:100%;position:relative;">
<img :src="homeItem.homeBackUrl" style="width: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
标签：pagination,vue,const,import,ref,swiper,6.8 来源： https://www.cnblogs.com/architectforest/p/15637238.html