自定义开屏启动广告页

本文主要是介绍自定义开屏启动广告页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

自定义开屏启动广告页

效果图

简单版

• 图片 + 倒计时

<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>

这篇关于自定义开屏启动广告页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---