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://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/28/vue-js-3-2-6-jie-jue-swiper-dong-tai-jia-zai-shu-ju-shi-mo/
对应的源码可以访问这里获取： 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
