效果圖

代碼文章來(lái)源地址http://www.zghlxwxcb.cn/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()">跳過(guò)</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>

		<!-- 輪播指示點(diǎn) -->
		<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',

				// 定時(shí)器
				interval: null,

				// 倒計(jì)時(shí)時(shí)長(zhǎng)
				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首頁(yè)、302歡迎頁(yè)、303商家登錄
					}
				}).then(res => {
					console.log("==獲取輪播圖==");
					console.log(res);
					uni.hideLoading();
					_this.swiperList = res.data;

					_this.codeText();
				}).catch(res => {
					console.log(res);
				})
			},

			// 時(shí)間倒計(jì)時(shí)
			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)
			},

			// 滑動(dòng)輪播圖
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},

			// 跳過(guò)
			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%;
	}

	/* 輪播指示點(diǎn) */
	.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>

到了這里，關(guān)于微信小程序全屏開(kāi)屏廣告的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！