解决倒计时组件及示例时间不会重置的问题

gwx1988 · Nov 15, 2018 · 320a7a6 · 320a7a6
1 parent f10aefa
commit 320a7a6
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 41 deletions.
diff --git a/examples/hello-uniapp/components/graceCountd.vue b/examples/hello-uniapp/components/graceCountd.vue
@@ -7,7 +7,7 @@
 		<view class="grace-countdown-numbers" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{s}}</view>
 	</view>
 </template>
-<script>
+<script>
 export default {
 	name: "graceCountd",
 	props: {
@@ -33,7 +33,8 @@ export default {
 		}
 	},
 	data() {
-		return {
+		return {
+            setTime:null,
 			h: '00',
 			i: '00',
 			s: '00',
@@ -62,9 +63,12 @@ export default {
 			this.setInterValFunc(this);
 		}
 	},
+    beforeDestroy(){
+        clearInterval(this.setTime)
+    },
 	methods: {
 		setInterValFunc:function(obj){
-			setInterval(function(){ obj.countDown(obj);}, 1000);
+			this.setTime = setInterval(function(){ obj.countDown(obj);}, 1000);
 		},
 		countDown: function (self){
 			var leftTime = self.leftTime - new Date();

diff --git a/examples/hello-uniapp/pages/template/countdown/countdown.vue b/examples/hello-uniapp/pages/template/countdown/countdown.vue
@@ -17,46 +17,73 @@
 </template>
 <script>
 	import graceCountd from "../../../components/graceCountd.vue";
-	//模拟3个时间
-	var dateObj = new Date();
-	var currentTime = dateObj.getTime();
-	var timer1 = formatDateTime((currentTime + 1000 * 2000));
-	var timer2 = formatDateTime((currentTime + 1000 * 3000));
-	var timer3 = formatDateTime((currentTime + 1000 * 5000));
-	//时间戳 转 YY-mm-dd HH:ii:ss 
-	function formatDateTime(inputTime){
-		  var date = new Date(inputTime);
-		  var y = date.getFullYear();
-		  var m = date.getMonth() + 1;
-		  m = m < 10 ? ('0' + m) : m;
-		  var d = date.getDate();
-		  d = d < 10 ? ('0' + d) : d;
-		  var h = date.getHours();
-		  h = h < 10 ? ('0' + h) : h;
-		  var minute = date.getMinutes();
-		  var second = date.getSeconds();
-		  minute = minute < 10 ? ('0' + minute) : minute;
-		  second = second < 10 ? ('0' + second) : second;
-		  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
-	};
 	export default {
-	data(){
-		return {
-			title : '倒计时',
-			timer1 : timer1, 
-			timer2 : timer2, 
-			timer3 : timer3
-		}
-	},
-	components:{
-		graceCountd
+		data() {
+			var dateObj = new Date();
+			var currentTime = dateObj.getTime();
+			var timer1 = this.formatDateTime((currentTime + 1000 * 2000));
+			var timer2 = this.formatDateTime((currentTime + 1000 * 3000));
+			var timer3 = this.formatDateTime((currentTime + 1000 * 5000));
+			return {
+				title: '倒计时',
+				timer1: timer1,
+				timer2: timer2,
+				timer3: timer3
+			}
+		},
+		components: {
+			graceCountd
+		},
+		methods: {
+			formatDateTime(inputTime) { //时间戳 转 YY-mm-dd HH:ii:ss 
+				var date = new Date(inputTime);
+				var y = date.getFullYear();
+				var m = date.getMonth() + 1;
+				m = m < 10 ? ('0' + m) : m;
+				var d = date.getDate();
+				d = d < 10 ? ('0' + d) : d;
+				var h = date.getHours();
+				h = h < 10 ? ('0' + h) : h;
+				var minute = date.getMinutes();
+				var second = date.getSeconds();
+				minute = minute < 10 ? ('0' + minute) : minute;
+				second = second < 10 ? ('0' + second) : second;
+				return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
+			}
+		},
 	}
-}
 </script>
 
 <style>
-view{display:flex; width:100%; flex-wrap:wrap; justify-content:center;}
-.uni-countdown{padding:2rpx 0; flex-wrap:nowrap; justify-content:center;}
-.uni-countdown-splitor{width:auto !important; justify-content:center; line-height:44upx; padding:0 5upx;}
-.uni-countdown-numbers{line-height:44upx; width:auto !important; padding:0 10upx; justify-content:center; height:44upx; border-radius:8upx; margin:0 5upx; border:1px solid #000000; font-size:22upx;}
-</style>
+	view {
+		display: flex;
+		width: 100%;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	.uni-countdown {
+		padding: 2rpx 0;
+		flex-wrap: nowrap;
+		justify-content: center;
+	}
+
+	.uni-countdown-splitor {
+		width: auto !important;
+		justify-content: center;
+		line-height: 44upx;
+		padding: 0 5upx;
+	}
+
+	.uni-countdown-numbers {
+		line-height: 44upx;
+		width: auto !important;
+		padding: 0 10upx;
+		justify-content: center;
+		height: 44upx;
+		border-radius: 8upx;
+		margin: 0 5upx;
+		border: 1px solid #000000;
+		font-size: 22upx;
+	}
+</style>