hu商学院滚动效果

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

@@ -2,7 +2,7 @@
 	<div>
 		<header-pulic :data="headerData"></header-pulic>
 		<nav>
-			<div class="nav-main">
+			<div class="nav-main" v-if="show" ref="ele">
 				<ul class="oh">
 					<li v-for="(item, index) in mainData" :key="item.labelName" :data-id="item.id" class="pointer-click-item fl bsb flex" :class="{active:index === initTabNumMain}" @click="tabMain(index)">
 						<p><img-error :datasrc="urlImg(item.label.icon)" :imgtype="'div'"></img-error></p>
@@ -35,6 +35,7 @@
 		name: '',
 		props: {
 			data: {
+				
 				type: Object,
 				default: () => ({
 					message: 'hello'
@@ -67,6 +68,8 @@
 				pageSize: 10,
 				initTabNumMain: 0,
 				isLoading: false,//是否正在加载
+				show : true ,
+				heightBefor : 0 ,
 				mainData: [{
 					'dataList': [],
 					'page': 1,//页码
@@ -78,6 +81,7 @@
 						'id': 0,
 						'label_name': '全部'
 					}
+					
 				}]
 			}
 		},
@@ -98,7 +102,29 @@
 				_this.loadMain();
 			});
 		},
+		mounted () {
+            window.addEventListener('scroll', this.handleScroll, true);  
+             // 监听（绑定）滚轮 滚动事件
+		},
 		methods: {
+			handleScroll(){
+	            // 页面滚动距顶部距离
+	            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+	            var scroll = scrollTop - this.heightBefor;
+	            this.heightBefor = scrollTop;
+	            if(scroll<0){
+	                if (scroll <-10 ){
+	                	this.show = true ;
+	                }
+	            }else{
+	            	if ( this.show) {
+	            		let heightCss = window.getComputedStyle(this.$refs.ele).height;
+		                if (this.heightBefor > heightCss.split('px')[0]){
+		                	 this.show = false  ;
+		                }
+	            	}
+	            }
+	        },
 			urlImg(u) {
 				let _this = this;
 				return _this.common.ServerHost + '/app/images/' +u;