标签：pagination vue const import ref swiper 6.8
一，关于(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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。