uni-app倒计时 请仔细阅读许可协议

3 篇文章 0 订阅
1 篇文章 0 订阅

setTimeout函数实机测试无效

在uni-app中setTimeout的函数写法与原生JS中的写法略有不同,使用原生的写法不会报错,但该写法会不起作用
官方文档

       			<!-- 点击阅读条款 -->
				<view class="c9 textcertent" style="border: 1px solid red;">
					<!-- 复选框 -->
					<checkbox @tap="checked" :data-index="index" :checked="files[index].checked"></checkbox>
					确认发布表示同意
					<text @tap="closecan" style="color:#00C6FF">《用户协议条款》</text>
				</view>
				
				<!-- 阅读条款遮罩 -->
				<view @touchmove.prevent class="zhezhao" v-show="isZheZhao">
					<scroll-view scroll-y class="content">
						<view class="title">协议</view>
						<view class="con">
							通过本平台服务平台,您可以按照本平台的规则发布各种生活信息。
							但所发布的信息不得含有以下内容。。。。。
						</view>		
							<button class="disabledQueDing" v-if="timeout!==0" :disabled="queDingFn">
								({{timeout}})请仔细阅读《用户 <text style="color: red;font-weight: bold;">协议</text> 条款》
							</button>
							<button v-else class="queDing" @tap="queDing">确定</button>
					</scroll-view>
					</view>


	

					//数据
					data() {
						return {
							timeout:10,
							queDingFn:true,
							//遮罩
							isZheZhao:false,
						}
					}

				//方法
				methods: {
						/* 阅读协议的复选框 */
						checked(e){
							console.log(e)
						},
						/* 点击发布协议 按钮 */
						 closecan() {
							var that=this;
							this.isZheZhao=true;
							function init(){
								that.queDingFn=true;
								that.timeout=10;
							}				
							
							var t=setInterval(function(){
								that.timeout--;
								if(that.timeout<=0){
									that.queDingFn=false;
									clearInterval(t);
									return false;
								}					
							},1000);
							
							init();
							
						},
						 
						 /* 发布协议 里的确定*/
						 queDing(){
							 this.isZheZhao=false;
						 },
				}	 


			//样式

		/* 遮罩 */
				.zhezhao{
					background-color: rgba(0, 0, 0, 0.5);
					width:100vw;
					height:100vh;
					position: fixed;
					left: 0;
					top: 0;
					z-index: 999;
					.content{
						background-color: #fff;
						width:700upx;
						height:1000upx;
						position: absolute;
						margin: auto;
						left: 0;top: 0;
						right: 0;bottom: 0;	
						box-sizing: border-box;
						padding: 50upx 40upx;
						color: #333;
						border-radius: 10upx;
						/* 标题 */
						.title{
							font-size: 38upx;
							font-weight: bold;
							text-align: center;
							margin-bottom: 25upx;
						}
						/* 条款内容 */
						.con{
							font-size: 30upx;
							text-align: justify;
						}
						/* 禁用按钮 */
						.disabledQueDing{
							display:block;
						    border: 1px solid rgba(37, 184, 178, 1); 
							color: #333;
							margin: 50upx auto;
							border-radius: 5upx;
							width: 500upx;
							height: 60upx;
							line-height: 60upx;
							text-align: center;
							font-size: 28upx;
						}
						
						/* 确定按钮 */
						.queDing{
							display:block;
							width: 150upx;
							height: 60upx;
							text-align: center;
							line-height: 60upx;
							margin: 50upx auto;
							background: rgba(37, 184, 178, 1);
							border-radius: 5upx;
							color: #fff;
							font-size: 28upx;
						}
					}
				}

	
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

裴嘉靖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值