自定义开屏启动广告页

自定义开屏启动广告页

效果图

简单版

• 图片 + 倒计时

<template>
	<view class="guide fcc" :style="{ background: `url(${ imgUrl }) no-repeat`}">
		<view class="skip_btn" @click.stop="launchApp">{{ content }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: `05 跳过`,
				countDown: 5,
				timerId: null,
                imgUrl: 'xxx'
			}
		},
		onLoad() {
			this.showAdvertisement()
		},
		onUnload() {
			clearInterval(this.timerId);
		},
		methods: {
			showAdvertisement() {
				this.timerId = setInterval(() => {
					if (this.countDown > 1) {
						this.countDown--;
						this.content = `0${ this.countDown } 跳过`;
                        
					} else {
						this.launchApp(); // 启动App
					}
				}, 1000);
			},
			launchApp() {
				clearInterval(this.timerId);
                
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

轮播方式

• 在基础上，通过轮播图展示

<template>
	<view class="guide fcc">	
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" indicator-active-color="#3c9cff">
			<swiper-item>
				<view class="swiper-item"  v-for="(item, index) in 3" :key="index">
					<image class="swiper-img" :src="item.img" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="skip_btn" @click.stop="launchApp">{{ content }}</view>
	</view>
</template>

css

• 根据个人所需调整…

<style lang="scss" scoped>
	.fcc {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.guide {
		width: 100%;
		height: 100vh;
		position: relative;
		background-size: cover !important;
		background-position: center center !important;
		background-attachment: fixed !important;
	}

	.skip_btn {
		width: 130rpx;
		height: 60rpx;
		line-height: 60rpx;
		position: fixed;
		top: 60rpx;
		right: 50rpx;
        z-index: 999;
        font-size: 28rpx;
		color: #333;
		text-align: center;
        border: 1rpx solid  #fff;
		border-radius: 30rpx;
		padding: 0 25rpx;
	}
	
	.swiper {
		width: 100%;
		height: inherit;
        .swiper-item {
            width: 100%;
            height: 100%;
            display: block;
            text-align: center;
        }
        .swiper-img {
            width: 100%;
            height: 100%;
        }
	}
</style>