这是我的启动页面代码 倒计时或者手动跳转到首页的 , 但是小米上架审核的时候 在首页再点击我的 还是跳回到首页 这是uniapp的bug 还是我这个页面倒计时影响的呢?
<template>
<view>
<view v-if="hasNet && showAdvert" class="flex flex-direction flex-wrap align-center justify-center benben-flex-layout firstHome_flex_1">
<view style="position: relative;width:100%;height:100%">
<swiper ref="benbenSwiperfd1_0" :current="defaultAdsIndex"
@change="defaultAdsIndex = $event.detail.current"
class='flex position-relative firstHome_fd1_0' previous-margin="0rpx" next-margin="0rpx"
:display-multiple-items="1" :interval="2000" :duration="500" :autoplay='true' :circular='true'>
<swiper-item class='flex firstHome_fd1_0' v-for="(item, index) in advert">
<image class='firstHome_fd1_0_c1_c0' mode="aspectFill" :src='item.thumb'></image>
</swiper-item>
</swiper>
<view style="position: absolute"
class="flex dot flex align-center justify-center firstHome_swiperDotfd1_0">
<template v-for="(item, index) in advert">
<view :key="index" v-if="defaultAdsIndex == index"
class="flex dot selected flex align-center justify-center firstHome_swiperDotSelectedfd1_0">
</view>
<view :key="index" v-else
class="flex dot unselected flex align-center justify-center firstHome_swiperDotUnselectedfd1_0">
</view>
</template>
</view>
</view>
<!-- 优化的跳过按钮 -->
<view class="skip-container skip-bottom-right">
<text class="skip-btn" v-if="advertTime > 0" @click="pass()">
<text class="skip-text">跳过</text>
<text class="countdown">{{advertTime}}s</text>
</text>
<text class="enter-btn" v-if="advertTime == 0" @click="pass()">正在进入</text>
</view>
</view>
<fu-notwork></fu-notwork>
</view>
</template>
<script>
export default {
data() {
return {
hasNet:false,
showAdvert: false,
advert: [],
advertTime: 3,//倒计时
defaultAdsIndex: 0,
timer:null
};
},
computed: {
themeColor() {
return this.$store.getters.themeColor
},
},
onHide() {
this.showAdvert = false
clearInterval(this.timer)
},
async onShow() {
var that = this
//苹果要先检查网络,有网时执行,无网不显示
let s = 0;
let betTimer = setInterval(() => {
uni.getNetworkType({
success: (res) => {
console.log(res.networkType, s,'网络');
if (res.networkType !== 'none') {
clearInterval(betTimer);
console.log('已有网络!');//有网络就加载
that.hasNet = true
that.getadvert()
//写逻辑代码,(包含接口文件和网络接口的)
}
else{
console.log('没有网络')
}
}
});
s++;
}, 500);
},
onBackPress() {
this.showAdvert = false
clearInterval(this.timer)
},
methods: {
pass(){
clearInterval(this.timer)
uni.switchTab({
url: '/pages/tabBar/home/home'
})
},
getadvert() {
let that = this
that.$api.post(global.apiUrls.getNotice, {
typeid: 2
}).then(res => {
// console.log(res,'引导页')
if (res.data.code == 1) {
that.advert = res.data.data
uni.hideLoading();
if(that.advert.length == 0){
uni.switchTab({
url: '/pages/tabBar/home/home'
})
return false
}else{
that.showAdvert = true
that.timer = setInterval(function() {
if (that.advertTime <= 0) {
clearInterval(that.timer)
that.pass()
} else {
that.advertTime--
}
}, 1000)
}
}
});
}
}
};
</script>
<style lang="scss" scoped>
.page {
width: 100vw;
overflow-x: hidden;
min-height: calc(100vh - var(--window-bottom));
background-size: 100% auto;
}
.firstHome_flex_0 {
width: 100%;
overflow: hidden;
z-index: 10;
top: 0rpx;
height: 96rpx;
background-size: 100% auto;
}
.firstHome_flex_1 {
width:100%;height:100vh;
}
.firstHome_fd1_0_c1_c0 {
width: 100%;
height: 100vh;
// border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.firstHome_fd1_0 {
width: 100%;
height: 100vh;
}
.firstHome_swiperDotUnselectedfd1_0 {
border: 3px solid rgba(255, 255, 255, 0.6);
background: #FFFFFF;
width: 8rpx;
height: 8rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
margin: 0rpx 6rpx 0rpx 0rpx;
font-size: 24rpx;
color: #fff;
opacity: 0.5;
}
.firstHome_swiperDotSelectedfd1_0 {
border: 3px solid var(--benbenbdColor1);
background: #FFFFFF;
width: 28rpx;
height: 8rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
margin: 0rpx 6rpx 0rpx 0rpx;
font-size: 24rpx;
color: #fff;
}
::v-deep .firstHome_swiperDotfd1_0 {
position: absolute;
bottom: 6%;
left: 0rpx;
right: 0rpx;
}
.firstHome_flex_2 {
background: var(--benbenbgColor1);
padding: 32rpx 32rpx 24rpx 32rpx;
background-size: 100% auto;
}
.firstHome_fd2_1_c0_c2_c1 {
font-size: 18rpx;
color: rgba(160, 165, 172, 1);
}
.firstHome_fd2_1_c0_c2_c0_c0 {
color: #666666;
font-size: 28rpx;
font-weight: 400;
width: 480rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.firstHome_fd2_1_c0_c2_c0 {
touch-action: none;
height: 40rpx;
}
.firstHome_fd2_1_c0_c1 {
background: rgba(221, 221, 221, 1);
width: 1rpx;
height: 30rpx;
margin: 0rpx 24rpx 0rpx 24rpx;
transform: scaleX(0.5);
}
.firstHome_fd2_1_c0_c0 {
width: 106rpx;
height: 33rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.firstHome_fd2_1_c0 {
background: #F8F8F8;
border-radius: 44rpx 44rpx 44rpx 44rpx;
width: 686rpx;
height: 88rpx;
padding: 0rpx 32rpx 0rpx 32rpx;
}
/* 新增右下角跳过按钮样式 */
.skip-container {
position: fixed;
z-index: 999;
animation: fadeIn 0.5s ease-out;
&.skip-bottom-right {
bottom: 106rpx; /* 距离底部距离 */
right: 40rpx; /* 距离右侧距离 */
/* 如果在小屏设备上需要更大间距 */
@media (max-width: 375px) {
bottom: 106rpx;
right: 30rpx;
}
}
}
.skip-btn, .enter-btn {
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
border-radius: 50rpx;
color: #fff;
padding: 14rpx 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.25);
transition: all 0.3s ease;
background: rgba(0,0,0,0.5);
overflow: hidden;
position: relative;
/* 添加圆角外边框增强视觉效果 */
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 50rpx;
pointer-events: none;
}
/* 悬停效果 */
&:active {
transform: scale(0.95);
background: rgba(0,0,0,0.65);
}
}
/* 跳过文字和倒计时分开样式 */
.skip-text {
font-weight: 500;
padding-right: 8rpx;
}
.countdown {
font-weight: bold;
color: #FFD700; /* 金色倒计时数字 */
}
.enter-btn {
// background: linear-gradient(135deg, #4A90E2, #5CBD9D);
background: rgba(40, 120, 255, 0.8);
}
/* 淡入动画 */
@keyframes fadeIn {
from { opacity: 0; transform: translateX(40rpx); }
to { opacity: 1; transform: translateX(0); }
}
/* 添加倒计时跳动动画 */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* 倒计时最后3秒添加跳动效果 */
.countdown {
display: inline-block;
}
/* #ifndef MP-WEIXIN */
/* 当倒计时小于4秒时添加动画 */
.skip-btn:has(.countdown:contains('3')),
.skip-btn:has(.countdown:contains('2')),
.skip-btn:has(.countdown:contains('1')) {
.countdown {
animation: pulse 0.5s ease-in-out infinite;
color: #FF6347; /* 红色提示 */
}
}
/* #endif */
</style>
最新发布