分页优化

public/appnew/src/assets/js/public.js

@@ -214,5 +214,5 @@ export default {
 			console.log("other device");
 			obj.fn();
 		};
-	}
+	},
 };
\ No newline at end of file

public/appnew/src/components/businessCollege/articleList.vue

@@ -13,16 +13,16 @@
 			<div class="nav-seat" :style="'height: '+seatH+'rem;'"></div>
 		</nav>
 		<main>
+			<pagination-load :canload="!mainData[initTabNumMain].isStop" :distance="30" @load="getList">
 				<section v-for="(item, index) in mainData" v-show="index === initTabNumMain">
-				<pagination-load :canload="!item.isStop" :distance="30" @load="getList">
 					<ul>
 						<li is="self-defined-li" v-for="(item2, index2) in item.dataList" :data="item2" :dataindex="index2"></li>
 					</ul>
-				</pagination-load>
 					<div class="no-data-block" v-show="item.noDataFlag">暂无数据</div>
 					<div class="no-more-block" v-show="!item.noDataFlag&&item.isStop">没有更多了...</div>
 					<div class="loading-gif-block" v-show="isLoading">正在加载...</div>
 				</section>
+			</pagination-load>
 		</main>
 	</div>
 </template>

public/appnew/src/components/publicEg/paginationLoad.vue

@@ -19,7 +19,7 @@
 			 */
 			canload: {
 				type: Boolean,
-				default: true,
+				default: true
 			},
 
 			/**
@@ -34,16 +34,19 @@
 			 */
 			distance: {
 				type: Number,
-				default: 100,
+				default: 20,
 			},
 		},
 
 		data() {
 			return {
 				dom: null, // 外部容器dom
+				timer: false,
 			}
 		},
 		mounted() {
+			let _this = this;
+			
 			if(this.container !== global) {
 				this.dom = document.querySelector(this.container)
 			} else {
@@ -52,7 +55,12 @@
 			if(!this.dom) {
 				return
 			}
-			this.dom.addEventListener('scroll', this.scroll, false)
+			let timer = false;//定义计时器
+			this.dom.addEventListener('scroll', ()=>{
+				timer && clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
+			    timer = setTimeout(_this.scroll, 200);
+			}, false);
+			
 		},
 
 		methods: {
@@ -71,9 +79,8 @@
 					parentNode = this.$el.parentNode
 				}
 				if(parentNode) {
-					//const rect = parentNode.getBoundingClientRect();
-					//if((rect.bottom <= viewHeight + this.distance)) {
-					if((this.getScrollTop() + this.getClientHeight() + this.distance >= this.getScrollHeight())) {
+					const rect = parentNode.getBoundingClientRect();
+					if((rect.bottom <= viewHeight + this.distance)) {
 						//DOM 更新循环结束之后执行
 						this.$nextTick(() => {
 							this.load()
@@ -81,30 +88,6 @@
 					}
 				}
 			},
-			//获取滚动条当前的位置 
-			getScrollTop() {
-				let scrollTop = 0;
-				if(document.documentElement && document.documentElement.scrollTop) {
-					scrollTop = document.documentElement.scrollTop;
-				} else if(document.body) {
-					scrollTop = document.body.scrollTop;
-				}
-				return scrollTop;
-			},
-			//获取当前可视范围的高度
-			getClientHeight() {
-				let clientHeight = 0;
-				if(document.body.clientHeight && document.documentElement.clientHeight) {
-					clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
-				} else {
-					clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
-				}
-				return clientHeight;
-			},
-			//获取文档完整的高度
-			getScrollHeight() {
-				return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
-			},
 			/**
 			 * 加载一组数据的方法
 			 */
@@ -112,6 +95,11 @@
 				this.$emit('load')
 			},
 		},
+		watch: {
+			canload(newValue, oldVal) {
+				this.canload = newValue;//当父组件传入的canload更新时，把src改为新值
+			}
+		},
 		beforeDestroy() {
 			if(this.dom) {
 				this.dom.removeEventListener('scroll', this.scroll, false)

public/appnew/src/components/shop/shopList.vue

@@ -26,8 +26,8 @@
 			<div class="nav-seat"></div>
 		</nav>
 		<main class="main-content">
+			<pagination-load :canload="!mainData[initTabNumMain].isStop" :distance="10" @load="getList">
 				<section v-for="(item, index) in mainData" v-show="index === initTabNumMain">
-				<pagination-load :canload="!item.isStop" :distance="10" @load="getList">
 					    <ul>
 					    	<li class="main-sec-li" v-for="(item2, index2) in item.dataList" @click="toShopDetail(item2.id)">
 					    		<div class="shop-list-img shop-list">
@@ -42,11 +42,11 @@
 								</div>
 					    	</li>
 						</ul>
-		        </pagination-load>
 			        <div class="no-data-block" v-show="item.noDataFlag">暂无数据</div>
 					<div class="no-more-block" v-show="!item.noDataFlag&&item.isStop">没有更多了...</div>
 					<div class="loading-gif-block" v-show="isLoading">正在加载...</div>
 				</section>
+			</pagination-load>
 		</main>
 		<div class="mark-shop-choose" v-for="(item, index) in mainDataChoose" :key="item.title" v-show="(initTabNumMainChoose == index) && item.isShow">
 			<div v-show="index == 0">
@@ -109,7 +109,8 @@
 					'page': 1,//页码
 					'isLoadOnce': false,//是否请求过一次数据
 					'isStop': false,//是否所有页的数据加载完毕
-					'noDataFlag': false,//是否是无数据
+					'noDataFlag': false,//是否是无数据,
+					'scrollHeight': 0,//距离文档顶部的高度
 				},
 				{
 					'title': '商场',
@@ -118,6 +119,7 @@
 					'isLoadOnce': false,//是否请求过一次数据
 					'isStop': false,//是否所有页的数据加载完毕
 					'noDataFlag': false,//是否是无数据
+					'scrollHeight': 0,//距离文档顶部的高度
 				}
 			],//请求返回的数据体集合
 			pageSize: 15,
@@ -269,6 +271,10 @@
 			},
 			tabMain(index) {
 				let _this = this;
+				
+				_this.mainData[_this.initTabNumMain].scrollHeight = document.body.scrollTop;//记录切换时的高度
+				window.scrollTo(0,_this.mainData[index].scrollHeight);//滚动到指定位置
+				
 				_this.initTabNumMain = index;
 				if(!_this.mainData[index].isLoadOnce) {
 					_this.getList();