团购列表的定时器显示的优化

yvan.ni
1 parent e5519737
Showing 4 changed files with 74 additions and 46 deletions
packageC/pages/group_list/group_list.js
packageC/pages/group_list/group_list.wxml
pages/activity/pind_list/pind_list.js
pages/activity/seckill_list/seckill_list.js
@@ -19,7 +19,8 @@ Page({
 		noMore: false, // 检测是否有更多数据,true为没有更多数据,false为还有数据
 		pageNum: 1, // 当前页数
  
-	    time_arr:[]
+	    time_arr:[],
+	    timer: null,
   },
  
   /**
@@ -296,8 +297,6 @@ Page({
 		var th = this;
 		// 获取当前时间，同时得到活动结束时间数组
 		let newTime = ut.gettimestamp();
-
-
         var time_arr=[];
  
 		for (let j = 0; j < this.data.list.length; j++) {
@@ -309,43 +308,66 @@ Page({
 			// 对结束时间进行处理渲染到页面
 			for (var i = 0; i < endTimeList.length; i++) {
  
-				var o = endTimeList[i];
-				var endTime = this.data.type == 1 ? o.end_time : o.start_time;
+
 				// if(th.data.type==0) endTime = o.start_time;
-				let obj = null;
-				// 如果活动未结束，对时间进行处理
-				if (endTime - newTime > 0) {
-					let time = (endTime - newTime);
-					// 获取天、时、分、秒
-					let day = parseInt(time / (60 * 60 * 24));
-					let hou = parseInt(time % (60 * 60 * 24) / 3600);
-					let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
-					let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
-					obj = {
-						day: this.timeFormat(day),
-						hou: this.timeFormat(hou),
-						min: this.timeFormat(min),
-						sec: this.timeFormat(sec),
-						hide: 1
-					}
-				} else {
-					//活动已结束，全部设置为'00'
-					obj = {day: '00', hou: '00', min: '00', sec: '00'}
-				}
-				//var txt = "goodlist[" + i + "].djs";
-				//th.setData({[txt]: obj});
  
-				var e={djs:obj};
-				arr_new.push(e);
  
+				// 创建查询对象
+				let query = wx.createSelectorQuery();
+				// 获取目标元素，并获取目标元素的信息
+				query.select("#l_item_"+j+"_"+i).boundingClientRect();
+				// 获取视口，并获取视口信息
+				query.selectViewport().boundingClientRect();
+				//--  执行查询,元素要在显示中的才显示定时器 --
+				query.exec(([target, view]) => {
+
+					if (!th.data.is_timer) return;
+					if (!target) return;
+					if (!target.id) return;
+
+					let idx_str=  target.id.replace('l_item_','');
+					idx_str=idx_str.split('_');
+
+					var o = this.data.list[idx_str[0]][idx_str[1]];
+					var endTime = this.data.type == 1 ? o.end_time : o.start_time;
+
+					// 条件1：当目标顶部距离视口顶部距离小于视口的高度时
+					// 条件2：当目标底部距离视口顶部距离大于0时
+					// 当以上两个条件同时成立时，目标元素在视口中
+					if (target.top < view.height && target.bottom > 0) {
+
+						let obj = null;
+						// 如果活动未结束，对时间进行处理
+						if (endTime - newTime > 0) {
+							let time = (endTime - newTime);
+							// 获取天、时、分、秒
+							let day = parseInt(time / (60 * 60 * 24));
+							let hou = parseInt(time % (60 * 60 * 24) / 3600);
+							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
+							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
+							obj = {
+								day: this.timeFormat(day),
+								hou: this.timeFormat(hou),
+								min: this.timeFormat(min),
+								sec: this.timeFormat(sec),
+								hide: 1
+							}
+						} else {
+							//活动已结束，全部设置为'00'
+							obj = {day: '00', hou: '00', min: '00', sec: '00'}
+						}
+
+						var txt = "time_arr[" + idx_str[0] + "][" + idx_str[1] + "].djs";
+						th.setData({[txt]: obj});
+					}
+				});
+				//var e={djs:obj};
+				//arr_new.push(e);
 			}
  
-			time_arr.push(arr_new);
-
-
+			//time_arr.push(arr_new);
 		}
-
-		this.setData({time_arr:time_arr});
+		//this.setData({time_arr:time_arr});
  
 	},
  
@@ -4,7 +4,7 @@
 	<block wx:for="{{list}}" wx:for-item="p_item" wx:for-index="p_idx">
  
 	   <block wx:for="{{p_item}}">
-		  <view class="list-item" bindtap="goto"  data-pidx="{{p_idx}}"  data-index="{{index}}" >
+		  <view id="l_item_{{p_idx}}_{{index}}" class="list-item" bindtap="goto"  data-pidx="{{p_idx}}"  data-index="{{index}}" >
 			<view class="img-container">
 				<image class="img-block" src="{{imghost + item.original_img}}" data-val="{{item.original_img}}"
 					   data-errorimg="list[{{p_idx}}][{{index}}].original_img" binderror="bind_bnerr2" lazy-load="true"></image>
@@ -97,7 +97,7 @@ Page({
  
   onHide: function () {
     //--清理定时器--
-    clearInterval(this.timer);
+    clearInterval(this.data.timer);
     this.setData({
       isshow: 0
     });
@@ -111,15 +111,15 @@ Page({
   //----倒计时函数-----
   countDown() {
     if (!this.data.goodlist) return false;
+    if (!this.data.is_timer) return false;
+
     var th = this;
     // 获取当前时间，同时得到活动结束时间数组
     var newTime = ut.gettimestamp();
     var endTimeList = this.data.goodlist;
     // 对结束时间进行处理渲染到页面
     for (var i = 0; i < endTimeList.length;i++){
-         var o = endTimeList[i];
-         var endTime = o.end_time;
-         if(th.data.type==0) endTime = o.start_time;
+
  
           // 创建查询对象
           let query = wx.createSelectorQuery();
@@ -134,6 +134,11 @@ Page({
             if (!target) return;
             if (!target.id) return;
             let idx=  target.id.replace('kill-item','');
+
+            var o = endTimeList[idx];
+            var endTime = o.end_time;
+            if(th.data.type==0) endTime = o.start_time;
+
             // 条件1：当目标顶部距离视口顶部距离小于视口的高度时
             // 条件2：当目标底部距离视口顶部距离大于0时
             // 当以上两个条件同时成立时，目标元素在视口中
@@ -115,6 +115,7 @@ Page({
  
   //----倒计时函数,优化定时器只显示在可视范围内的-----
   countDown() {
+    if (!this.data.goodlist) return false;
     if (!this.data.is_timer) return false;
  
     var th = this;
@@ -124,14 +125,11 @@ Page({
     if (endTimeList == null) return null
     // 对结束时间进行处理渲染到页面
     for (var i = 0; i < endTimeList.length; i++) {
+      var oo = endTimeList[i];
+      if(!oo) continue;
  
       if (!this.data.is_timer) break;
  
-      var o = endTimeList[i];
-      if(!o) continue;
-      var endTime = o.end_time;
-      if (th.data.type == 0) endTime = o.start_time;
-
       // 创建查询对象
       let query = wx.createSelectorQuery();
       // 获取目标元素，并获取目标元素的信息
@@ -146,6 +144,11 @@ Page({
         if (!target.id) return;
  
         let idx=  target.id.replace('kill-item','');
+        var o=endTimeList[idx];
+        var endTime = o.end_time;
+        if (th.data.type == 0) endTime = o.start_time;
+
+
         // 条件1：当目标顶部距离视口顶部距离小于视口的高度时
         // 条件2：当目标底部距离视口顶部距离大于0时
         // 当以上两个条件同时成立时，目标元素在视口中
@@ -187,8 +190,6 @@ Page({
         }
       });
  
-
-
     }
   },