需求描述
1、在計時頁面中點擊【開始】按鈕開始倒計時，當退出該頁面時計時仍然繼續(xù)
2、計時結束后，彈出提示（無論當前處于哪個頁面）
最終效果
代碼
一、全局定義
1、app.json：加上下面這個
"usingComponents": {"dialog":"/components/dialog/dialog"}
2、app.wxss：需要導入dialog.wxss，否則自定義的彈窗樣式失效
@import "components/dialog/dislog.wxss";
3、app.js：實現(xiàn)倒計時+設置變量監(jiān)聽器
App({
globalData:{
//倒計時相關的全局變量
hour: 1,
firstMinute: 0,
lastMinute: 0,
firstSecond: 0,
lastSecond: 0,
timer:null,
isstart_flag: false,
},
isShow:false,
/**
* 設置globalData中變量的監(jiān)聽器
*/
setWatcher(watch) {
let obj = this.globalData;
Object.keys(obj).forEach(v => {
this.observe(obj,v,watch);
})
},
/**
* 設置isShow變量的監(jiān)聽器
*/
setWatcher1(watch) {
var val = this.isShow; // 給該屬性設默認值
Object.defineProperty(this, "isShow", {
configurable: true,
enumerable: true,
set: function(value) {
val = value;
watch(val); // 賦值(set)時，調用對應函數(shù)
},
get: function() {
return val;
}
})
},
/**
* 監(jiān)聽屬性 并執(zhí)行監(jiān)聽函數(shù)
*/
observe(obj, key,watchFun) {
var val = obj[key]; // 給該屬性設默認值
Object.defineProperty(obj, key, {
configurable: true,
enumerable: true,
set: function(value) {
val = value;
watchFun(key,val); // 賦值(set)時，調用對應函數(shù)
},
get: function() {
return val;
}
})
},
//倒計時-具體實現(xiàn)由其他同事編寫
countDown() {
var obj = this.globalData;
var self = this;
clearInterval(obj.timer)
var h = 0;
var m = 59,
var s = 60;
var timer = setInterval(function () {
--s;
if (s < 0) {
--m;
s = 59;
}
if (m < 0) {
--h;
m = 59
}
if (h < 0) {
s = 0;
m = 0;
}
if (h == 0 && m == 0 && s == 0) {
self.isShow = true;
clearInterval(obj.timer);
}
function checkTime(i) {
if (i < 10) {
i = '0' + i
}
return i;
}
s = checkTime(s);
let n = checkTime(m)
if (n.length >= 2) {
m = n.slice(-2);
}
let strMinute = m.toString();
let splMinute = strMinute.split("");
let firstMinute = splMinute[0];
let lastMinute = splMinute[1];
let strSecond = s.toString();
let splSecond = strSecond.split("");
let firstSecond = splSecond[0];
let lastSecond = splSecond[1];
obj.hour = h;
obj.firstMinute = firstMinute;
obj.lastMinute = lastMinute;
obj.firstSecond = firstSecond;
obj.lastSecond = lastSecond;
}, 1000);
obj.timer = timer;
},
})
二、組裝彈窗組件
注意：class名稱盡量不要與其他頁面重復
1、dialog.wxml
<view class='wx_dialog_container' hidden="{{!isShow}}">
<view class='wx-mask'></view>
<view class="alert1">
<view class="white1">
<view class="title1">提示</view>
<view class="text2">計時結束</view>
<view class="btn1" bindtap="_confirmEvent">我知道了</view>
</view>
</view>
</view>
2、dialog.wxss
.wx-mask{
position: fixed;
z-index: 9998;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.wx-dialog{
position: fixed;
z-index: 9999;
width: 80%;
max-width: 600rpx;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #FFFFFF;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.wx-dialog-title{
font-size: 18px;
padding: 15px 15px 5px;
}
.wx-dialog-content{
padding: 15px 15px 5px;
min-height: 40px;
font-size: 16px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #999999;
}
.wx-dialog-footer{
display: flex;
align-items: center;
position: relative;
line-height: 45px;
font-size: 17px;
}
.wx-dialog-footer::before{
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.wx-dialog-btn{
display: block;
-webkit-flex: 1;
flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(1){
color: #353535;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2){
color: #3CC51F;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
.alert1{
width:100%;
height:100%;
background:rgba(41,36,33,0.5);
position:fixed;
top:0;
left:0;
z-index:99999;
display:flex;
justify-content:center;
align-items:center;
}
.white1{
width:608rpx;
height:362rpx;
background-color:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
font-size:28rpx;
border-radius:20rpx;
padding:5% 3%;
}
.white1 .title1{
font-size: 40rpx;
}
.white1 .text2{
font-size: 30rpx;
color: #a1a3a6;
margin-bottom: 60rpx;
}
.btn1{
width: 100%;
height: 60rpx;
border-top: 2rpx solid #eee;
text-align: center;
line-height: 60rpx;
color: #45b97c;
font-size: 30rpx;
}
3、dialog.json
{
"component": true,
"usingComponents": {}
}
4、dialog.js
const app = getApp();
Component({
options: {
multipleSlots: true, // 在組件定義時的選項中啟用多slot支持
addGlobalClass: true
},
/**
* 組件的屬性列表
* 用于組件自定義設置
*/
properties: {
},
/**
* 私有數(shù)據(jù),組件的初始數(shù)據(jù)
* 可用于模版渲染
*/
data: {
// 彈窗顯示控制
isShow:false
},
lifetimes:{
attached: function () {
const self = this;
self.setData({
isShow: app.isShow,
})
},
},
pageLifetimes:{
show(){
const self = this;
app.setWatcher1(self.watchBack2.bind(self))
}
},
/**
* 組件的方法列表
* 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似
*/
methods: {
watchBack2(value){
this.setData({
isShow:value,
})
},
/*
* 內部私有方法建議以下劃線開頭
* triggerEvent 用于觸發(fā)事件
*/
_confirmEvent(){
app.isShow = false;
this.setData({
isShow: false
})
}
}
})
三、倒計時頁面實現(xiàn)
1、startCountDown.wxml
<view class="Container">
<view class="nz_container">
<view class="time">
<view class="time_item">{{hour}}</view>
<view class="time_items">:</view>
<view class="time_item">{{firstMinute}}</view>
<view class="time_item">{{lastMinute}}</view>
<view class="time_items">:</view>
<view class="time_item">{{firstSecond}}</view>
<view class="time_item">{{lastSecond}}</view>
</view>
</view>
<view class="start_btn" wx:if="{{isstart_flag}}" bindtap="reSet">重置</view>
<view class="start_btn" wx:else bindtap="startCountDown">開始</view>
<!-- 彈窗 -->
<view class="dialog">
<dialog id='dialog'>
</dialog>
</view>
</view>
2、startCountDown.wxss
page{
width:100%;
height:100%;
background-color:#eee;
overflow:hidden;
}
.nz_container{
width:100%;
height:394rpx;
background: #FFFFFF;
border-radius: 6rpx;
margin-top:1.2%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.time{
width:422rpx;
height:88rpx;
}
.time_item{
width: 70rpx;
height: 88rpx;
background: #F0FAF8;
border: 2rpx solid #149C89;
border-radius: 6rpx;
font-family: PingFangSC-Medium;
font-size: 56rpx;
color: #333333;
letter-spacing: 3.5rpx;
text-align: center;
font-weight: 500;
margin-left:2%;
margin-right:2%;
}
.time_items{
font-size:60rpx;
}
.changetime_btn{
width:422rpx;
height:68rpx;
border: 1px solid #149C89;
border-radius: 34rpx;
margin-top: 5%;
display: flex;
justify-content: center;
align-items: center;
}
.changetime_btn image{
width:32rpx;
height:28rpx;
}
.start_btn{
width: 690rpx;
height: 104rpx;
background: #149C89;
border-radius: 55rpx;
text-align: center;
line-height: 104rpx;
font-family: PingFangSC-Semibold;
font-size: 40rpx;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 600;
margin: 6% auto;
}
.dialog{
position: fixed;
top:40%;
left: 40%;
z-index: 9999;
}
3、startCountDown.js
var app = getApp();
Page({
data: {
hour: 1,
firstMinute: 0,
lastMinute: 0,
firstSecond: 0,
lastSecond: 0,
timer:null,
isstart_flag: false,
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
const that = this;
//設置全局變量監(jiān)聽器
app.setWatcher(this.watchBack);
that.setData({
hour: app.globalData.hour,
firstMinute: app.globalData.firstMinute,
lastMinute: app.globalData.lastMinute,
firstSecond: app.globalData.firstSecond,
lastSecond: app.globalData.lastSecond,
timer: app.globalData.timer,
isstart_flag:app.globalData.isstart_flag,
})
},
watchBack(variable,value){
const that = this;
that.setData({
[variable]:value,
})
},
//開始倒計時
startCountDown() {
app.globalData.isstart_flag = true;
app.countDown();
},
//重置倒計時
reSet() {
const that = this;
clearInterval(app.globalData.timer);
app.globalData.hour = 1;
app.globalData.firstMinute = 0;
app.globalData.lastMinute = 0;
app.globalData.firstSecond = 0;
app.globalData.lastSecond = 0;
app.globalData.isstart_flag = false;
},
onUnload() {
const that = this;
// clearInterval(app.globalData.timer);
}
})
四、在每一個頁面都可以彈出彈窗提示
暫時未找到更簡單的方法。。。
1、在每個頁面的wxml中加上文章來源：http://www.zghlxwxcb.cn/news/detail-497753.html
<view class="dialog">
<dialog id='dialog'>
</dialog>
</view>
2、在每個頁面的wxss中加上:文章來源地址http://www.zghlxwxcb.cn/news/detail-497753.html
.dialog{
position: fixed;
top:40%;
left: 40%;
z-index: 9999;
}
到了這里，關于微信小程序-全局倒計時+全局彈窗提示的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
