一、最后实现效果
二、倒计时的实现
计时器的主要代码如下：
// 倒计时事件（times为自己设置的时间，这里是10）
countDownTime:function(){
var that = this;
if(that.times == 10){
that.sid = setInterval(function() {
that.times--;
if(that.times == 0){
//时间到了清除计时器
clearInterval(that.sid);
}
}, 1000);
}
},注意：在计时器执行倒计时的过程中，用户可能会退出该页面，此时需要在退出时清除计时器， 这里需要用到onUnload()，如下：
// 返回到上一页，清除定时器，防止离开此页面后，计时器还在执行
onUnload() {
clearInterval(this.sid);
},三、倒计时与已学习显示切换
通过设置两个布尔变量（timeshow、learned），通过v-show来控制其显示与不显示，倒计时中显示倒计时，结束后显示已学习。
前端部分：
<!-- 学习倒计时完成 -->
<view v-show="timeshow" class="study-status-time">{
{times}}s</view>
<!-- 显示已学习 -->
<view v-show="learned" class="study-status">已学习</view>js部分：
// 倒计时事件
countDownTime:function(){
var that = this;
if(that.times == 10){
that.sid = setInterval(function() {
that.times--;
if(that.times == 0){
clearInterval(that.sid);
that.timeshow=false;
that.learned=true;
// 提示框弹出
uni.showToast({
title:'文章已学习',
icon:'none',
duration:2000
})
}
}, 1000);
}
},四、完整代码
<template>
<view class="study-content">
<!-- 文章标题 -->
<view class="article-index-title">文章标题</view>
<!-- 文章内容 -->
<view class="article-content"> 文章内容</view>
<!-- 学习完成以及体会填写 -->
<view class="content-bottom">
<view class="content-bootom-item">
<!-- 学习体会填写 -->
<view class="idea-input" @click="inputideal()" ><span>填写学习体会</span></view>
<!-- 学习倒计时完成 -->
<view v-show="timeshow" class="study-status-time">{
{times}}s</view>
<!-- 显示已学习 -->
<view v-show="learned" class="study-status">已学习</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
times:10,
timeshow:true,
learned:false,
}
},
// 页面一开始就执行倒计时方法
onLoad() {
this.countDownTime()
},
// 返回到上一页，清除定时器，防止离开此页面后，计时器还在执行
onUnload() {
clearInterval(this.sid);
},
methods: {
// 倒计时事件
countDownTime:function(){
var that = this;
if(that.times == 10){
that.sid = setInterval(function() {
that.times--;
if(that.times == 0){
clearInterval(that.sid);
that.timeshow=false;
that.learned=true;
// 提示框弹出
uni.showToast({
title:'文章已学习',
icon:'none',
duration:2000
})
}
}, 1000);
}
},
// 点击输入体会框，若未完成则提示还有几秒，已完成则可输入
inputideal:function(){
if(this.times!=0){
uni.showToast({
title:'还有'+this.times+'秒可填写',
icon:'none',
duration:2000
})
return
}
}
}
}
</script>
<style>
.study-content{
width: 100%;
height: 100%;
}
.article-index-title{
padding: 30rpx 40rpx 20rpx 40rpx;
font-size: 40rpx;
font-weight: 600;
text-align: justify;
}
.article-content{
box-sizing: border-box;
padding-left: 40rpx;
padding-right: 40rpx;
overflow: hidden;
font-size: 32rpx;
width: 100%;
text-align: justify;
line-height: 1.8;
padding-bottom: 50rpx;
}
.content-bottom{
height: 120rpx;
width: 100%;
position: fixed;
bottom: 0;
border-top: 1px #f0f0f0 solid;
background-color: #ffffff;
z-index: 100;
}
.content-bootom-item{
margin-left: 20rpx;
margin-right: 20rpx;
display: flex;
justify-content: space-between;
}
.idea-input{
width: 75%;
background-color: #f0f0f0;
height: 80rpx;
margin-top: 20rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
}
.idea-input span{
color: #8b8b8b;
margin-left: 20rpx;
}
.study-status{
width: 20%;
background-color: #0055ff;
height: 80rpx;
margin-top: 20rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
.study-status-time{
width: 20%;
background-color: #8f8f8f;
height: 80rpx;
margin-top: 20rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
</style>
扫描二维码关注公众号，回复：
14784857 查看本文章
