|
2 days ago | |
---|---|---|
.. | ||
components | 2 days ago | |
changelog.md | 2 days ago | |
package.json | 2 days ago | |
readme.md | 2 days ago |
##简单粗暴的纯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>