fix: 修复轮播图滚动的时候,界面异常展示的问题

This commit is contained in:
Huangze
2025-05-30 15:40:38 +08:00
parent f9a7648afd
commit 0e78b89260

View File

@@ -8,24 +8,22 @@
<div class="banner-block swiper-slide" :key="surveyStats.user_count">
<p class="banner-block-slogan">实时链接消费者的深度洞察及日常信息采集工具</p>
<div class="banner-block-desc">
已支持 <CountTo :end="surveyStats.user_count" :use-comma="true" :key="surveyStats.user_count"
@ready-loop="readyLoop"
/> 用户 |
发起 <CountTo :end="surveyStats.survey_count" :use-comma="true" @ready-loop="readyLoop" /> 次调研 |
有效回收 <CountTo :end="surveyStats.sample_count" :use-comma="true" @ready-loop="readyLoop" /> 份数据
已支持
<CountTo :end="surveyStats.user_count" :use-comma="true" :key="surveyStats.user_count" />
用户 | 发起
<CountTo :end="surveyStats.survey_count" :use-comma="true" />
次调研 | 有效回收
<CountTo :end="surveyStats.sample_count" :use-comma="true" />
份数据
</div>
</div>
<!-- 动态 Banner 列表 -->
<div
v-for="(item, index) in bannerList"
:key="index"
class="swiper-slide banner-content"
:style="{ backgroundImage: 'url(' + item.banner_address + ')' }"
>
<p class="banner-content-title" :class="{'white': index === 0}">
<div v-for="(item, index) in bannerList" :key="index" class="swiper-slide banner-content"
:style="{ backgroundImage: 'url(' + item.banner_address + ')' }">
<p class="banner-content-title" :class="{ 'white': index === 0 }">
{{ item.title }}
</p>
<p class="banner-content-desc" :class="{'white': index === 0}">
<p class="banner-content-desc" :class="{ 'white': index === 0 }">
{{ item.synopsis }}
</p>
<p v-if="index === 0" class="banner-content-btn" @click="toBannerDetail(item)">
@@ -44,13 +42,8 @@
<!-- 分页器 -->
<div class="custom-pagination">
<span
v-for="(item, index) in 3"
:key="'dot' + index"
class="custom-pagination-bullet"
:class="{ 'active': activeIndex === index }"
@click="goToSlide(index)"
></span>
<span v-for="(item, index) in 3" :key="'dot' + index" class="custom-pagination-bullet"
:class="{ 'active': activeIndex === index }" @click="goToSlide(index)"></span>
</div>
</div>
</div>
@@ -108,17 +101,20 @@ const getQuesStatics = async () => {
surveyData.value = res.data
}
const readyLoop = ()=>{
if (bannerSwiper){
bannerSwiper.destroy()
}
initSwiper(true)
}
// function readyLoop(){
// initSwiper(true)
// }
// const readyLoop = ()=>{
// if (bannerSwiper){
// bannerSwiper.destroy()
// }
// initSwiper(true)
// }
const initSwiper = (loop = false)=>{
const initSwiper = (loop = false) => {
// 初始化 Swiper
if (bannerSwiper) {
bannerSwiper.destroy(true, true);
// bannerSwiper.destroy(true, true);
bannerSwiper = null;
}
bannerSwiper = new Swiper(swiperContainer.value, {
@@ -143,7 +139,7 @@ const initSwiper = (loop = false)=>{
},
on: {
slideChange: () => {
if (bannerSwiper){
if (bannerSwiper) {
activeIndex.value = bannerSwiper.realIndex
}
},
@@ -166,7 +162,7 @@ const goNext = () => {
const goToSlide = (index) => {
if (bannerSwiper) {
// 如果使用 loop: true则需用 slideToLoop
bannerSwiper.slideToLoop(index )
bannerSwiper.slideToLoop(index)
activeIndex.value = index
}
}
@@ -200,6 +196,7 @@ onBeforeUnmount(() => {
width: 100%;
padding: 20px;
}
.header-cont {
width: 100%;
display: flex;
@@ -341,10 +338,12 @@ onBeforeUnmount(() => {
.header-cont {
height: 45vh;
}
.banner-block-slogan {
top: 35%;
left: 18%;
}
.banner-block-desc {
left: 5%;
}
@@ -354,10 +353,12 @@ onBeforeUnmount(() => {
.header-cont {
height: 60vh;
}
.banner-block-slogan {
top: calc(35%);
left: calc(21%);
}
.banner-block-desc {
top: calc(54%);
left: calc(6%);
@@ -394,7 +395,8 @@ onBeforeUnmount(() => {
justify-content: center;
//background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
opacity: 0; /* 默认隐藏 */
opacity: 0;
/* 默认隐藏 */
transition: opacity 0.3s ease;
}
@@ -419,6 +421,7 @@ onBeforeUnmount(() => {
.custom-swiper-button-next {
right: 10px;
}
/* 自定义分页器样式 */
.custom-pagination {
position: absolute;