效果图
文章来源:https://www.toymoban.com/news/detail-851108.html
代码文章来源地址https://www.toymoban.com/news/detail-851108.html
<template>
<view>
<!-- 自定义头部 -->
<u-navbar title=" " :bgColor="bgColor">
<view class="u-nav-slot" slot="left">
<view class="leftCon">
<view class="countDown">
{{currentTime}}s
</view>
<view class="line">|</view>
<view class="passBtn" @click="passClick()">跳过</view>
</view>
</view>
</u-navbar>
<!-- 轮播图 -->
<swiper class="swiperList_box" :circular="true" :vertical="false" :autoplay="true" interval="2000"
@change="swiperChange">
<swiper-item class="swiperItem" :class="swiperCurrent==index?'cur':''" v-for="(item,index) in swiperList"
:key="index">
<image :src="item.img_url" mode="scaleToFill"></image>
</swiper-item>
</swiper>
<!-- 轮播指示点 -->
<view class="indicationList_box">
<block v-for="(item,index) in swiperList" :key="index">
<view class="spotItem" :class="swiperCurrent==index?'active':''"></view>
</block>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 自定义头部
bgColor: 'transparent',
// 定时器
interval: null,
// 倒计时时长
currentTime: 0,
// 轮播图
swiperList: [],
swiperCurrent: 0,
}
},
onLoad() {
},
onShow() {},
async onReady() {
var _this = this;
await _this.$onLaunched;
_this.currentTime = uni.getStorageSync('webConfig').web_config_str.welcome_time_num;
_this.getSwiperList();
},
methods: {
// 获取轮播图
getSwiperList() {
var _this = this;
uni.$u.http.get('/api/other.News/get_data_list', {
params: {
cat_id: '302', //301首页、302欢迎页、303商家登录
}
}).then(res => {
console.log("==获取轮播图==");
console.log(res);
uni.hideLoading();
_this.swiperList = res.data;
_this.codeText();
}).catch(res => {
console.log(res);
})
},
// 时间倒计时
codeText() {
var _this = this;
var currentTime = _this.currentTime;
_this.interval = setInterval(function() {
currentTime--;
// console.log(currentTime)
_this.currentTime = currentTime;
if (currentTime <= 0) {
clearInterval(_this.interval);
_this.passClick();
}
}, 1000)
},
// 滑动轮播图
swiperChange(e) {
this.swiperCurrent = e.detail.current;
},
// 跳过
passClick() {
var _this = this;
clearInterval(_this.interval);
uni.switchTab({
url: '/pages/index/index'
})
},
}
}
</script>
<style lang="scss" scoped>
// 自定义头部
.leftCon {
width: 200rpx;
height: 62rpx;
border-radius: 30rpx;
border: 2rpx solid #fff;
box-sizing: border-box;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.countDown,
.line,
.passBtn {
color: #fff;
opacity: 0.7;
}
.line {
margin: 0 20rpx;
}
/* 轮播图 */
.swiperList_box {
width: 100%;
height: 100vh;
position: relative;
top: 0;
z-index: 1;
}
.swiperItem {
width: 100%;
height: 100vh;
}
.swiperItem image {
width: 100%;
height: 100%;
}
/* 轮播指示点 */
.indicationList_box {
width: 100%;
height: 36rpx;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
bottom: 30rpx;
z-index: 99;
}
.spotItem {
width: 10rpx;
height: 10rpx;
border-radius: 20rpx;
background-color: rgba(0, 0, 0, 0.3);
overflow: hidden;
margin: 0 5rpx;
}
.spotItem.active {
width: 30rpx;
background-color: rgba(0, 0, 0, 0.6);
}
</style>
到了这里,关于微信小程序全屏开屏广告的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!