puyao ebbb4e262c 第一次提交 10 місяців тому
..
components ebbb4e262c 第一次提交 10 місяців тому
changelog.md ebbb4e262c 第一次提交 10 місяців тому
package.json ebbb4e262c 第一次提交 10 місяців тому
readme.md ebbb4e262c 第一次提交 10 місяців тому

readme.md

##简单粗暴的纯css实现环形的倒计时,适合兼容vue和nvue,主要用途用于uniad的短视频联盟倒计时发放奖励的机制,

##步骤

1.导入

2.使用示例

<template>
	<view>
		<view class="zcolor-while wh-w750" style="position:sticky;">
			<view style="height: 80rpx;"></view>
			<view class="flex-row justify-space-between align-center wh-w750" style="height: 100rpx;">
				<view class="flex-row align-center pa-20-0">
					<text class="fs-40 f-w mar-l30">视频</text>
				</view>
			</view>
		</view>
		<view>
			<ad-content-page :style="{height:swiperheight+'px'}" ref="adContentPage" @load="onadload" @error="onaderror"
				adpid="1111111112"></ad-content-page>
		</view>

		<view style="position: fixed; top: 200rpx; left: 20rpx; background-color: rgba(0, 0, 0, 0.4);"
			class=" justify-center align-center bor-r50" v-if="!iserr">
			<gb-progress originalColor="#222222" processColor="#FF672D" innerbgColor="#222222" :process="process"
				:startPosDegree="60" :radius="50" :barWidth="5">
				<image src="../../static/hbbs.png" mode="widthFix" class="wh-80"></image>
			</gb-progress>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				swiperheight: 0,
				countdown: 0,
				isback: true,
				noClick: true,
				interval: '',
				iserr: false,
				timer: '',
				process: 0,
				finishing: false,
				p: 0
			}
		},
		onLoad() {
	
			let res = uni.getSystemInfoSync()
			console.log(res.screenHeight)
			this.swiperheight = res.windowHeight - uni.upx2px(182)
			
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.adContentPage.show();
				this.isback = true
			})
		},
		onHide() {
			this.$refs.adContentPage.hide();
			this.isback = false
		},
		
		methods: {
	
			// 加载
			onadload(e) {
				console.log("onload");
				this.getBrowse()
			},
			onaderror(e) {
				this.iserr = true
				clearInterval(this.interval);
				console.log(e);
			},
			// 倒计时
			getBrowse() {
				this.interval = setInterval(() => {
					if (this.process < 100) {
						if (this.isback) {
							this.process = this.process + 2;
						}
					} else {
						clearInterval(this.interval);
						// 页面返回后停止,往下执行
						if (this.isback) {
							this.process = 0
							this.getBrowse()
						}
					}
				}, 1000)
			}
	
		}
	}
</script>

<style>

</style>