puyao ebbb4e262c 第一次提交 10 tháng trước cách đây
..
components ebbb4e262c 第一次提交 10 tháng trước cách đây
changelog.md ebbb4e262c 第一次提交 10 tháng trước cách đây
package.json ebbb4e262c 第一次提交 10 tháng trước cách đây
readme.md ebbb4e262c 第一次提交 10 tháng trước cách đây

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>