优化头部组件入参以及事件

components/h5header/index.vue

@@ -18,17 +18,30 @@
 	export default {
     name: 'h5header',
     props: {
-    	scrollVal: {
+    	scrollVal: { // 实际滚动的距离
     		type: Number,
-    		default: 0
+    		default: 25
     	},
-    	title: {
+    	title: { // 头部 title
     		type: String,
     		default: '云鹊医-赋能基层医生'
     	},
-    	shareObj: {
+    	shareObj: { // 分享的参数
     		type: Object,
-    		default: {}
+    		default: {
+    			shareUrl:'',
+					title1:'',
+					title2:'',
+					shareImageUrl:'',
+    		}
+    	},
+    	baseShowHeight: { // 需要进行滚动交互的阈值
+    		type: Number,
+    		default: 25, 
+    	} ,
+    	setedScroll: { // 如果外部组件设置了onscroll监听，则要设置为true，否则会被头部组件的onsrcoll覆盖!!!
+    		type: Boolean,
+    		default: false
     	}
     },
     data(){
@@ -36,40 +49,68 @@
     		leftIcon: leftimg1,
     		rightIcon: rightimg1,
     		isScroll: false,
-    		statusBarHeight: 40, // 给一个默认值，20 * 2 
+    		statusBarHeight: 20, // 给一个默认值，20 * 2 
     		titleHeight: 44 // title高度默认是44px
     	}
     },
     mounted(){
-  		this.$rocNative.getStatusBarHeight().then(res=>{
-  			const dpr = window.devicePixelRatio;
-    		if(this.$rocNative.isIOS){
-          this.statusBarHeight = res.statusBarHeight * dpr;
-          this.titleHeight = this.titleHeight * dpr;
-        }else{
-          this.statusBarHeight = res.statusBarHeight / dpr;
-        }
-    	})
+  		this.setHeaderHeight();
+  		if(!this.setedScroll){
+  			this.scrollHandleOwn();
+  		}
     },
     watch: {
     	scrollVal(val){
-    		if (val > 25) {
-					this.isScroll = true;
-					this.leftIcon = leftimg2;
-    			this.rightIcon = rightimg2;
-				} else {
-					this.isScroll = false;
-					this.leftIcon = leftimg1;
-    			this.rightIcon = rightimg1;
-				}
+    		this.setScrollHandle(val);
     	}
     },
     methods: {
+    	// 从APP获取电池栏高度并设置高度
+    	setHeaderHeight(){
+    		this.statusBarHeight = 20 * window.devicePixelRatio; // 给一个默认值，20 * 2 
+    		this.titleHeight = 44 * window.devicePixelRatio; // title高度默认是44px
+    		this.$rocNative.getStatusBarHeight().then(res=>{
+	  			const dpr = window.devicePixelRatio;
+	    		if(this.$rocNative.isIOS){
+	          this.statusBarHeight = res.statusBarHeight * dpr;
+	          this.titleHeight = this.titleHeight * dpr;
+	        }else{
+	          this.statusBarHeight = res.statusBarHeight / dpr;
+	        }
+	    	})
+    	},
     	goBack(){
     		this.$rocNative.goBack();
     	},
     	goShare(){
     		this.$rocNative.shareWechat(this.shareObj);
+    	},
+    	// 默认滚动事件
+    	scrollHandleOwn(){
+    		let bodyScrollTop = 0, documentScrollTop = 0;
+	    	window.onscroll = () => {
+	    		if(document.body){
+		        bodyScrollTop = document.body.scrollTop;
+		      }
+		      if(document.documentElement){
+		        documentScrollTop = document.documentElement.scrollTop;
+		      }
+	        const heightVal = imgHeight1 + imgHeight2 + imgHeight3;
+	        const scrollVal = bodyScrollTop || documentScrollTop;
+	        this.setScrollHandle(scrollVal);
+		    }
+    	},
+    	// 交互事件
+    	setScrollHandle(instval){
+    		if (instval >= this.baseShowHeight) {
+					this.isScroll = true;
+					this.leftIcon = leftimg2;
+    			this.rightIcon = rightimg2;
+				} else {
+					this.isScroll = false;
+					this.leftIcon = leftimg1;
+    			this.rightIcon = rightimg1;
+				}
     	}
     }
   }

pages/prehot.vue

@@ -3,7 +3,9 @@
     <h5header v-if="!isWeb" 
         :scrollVal="scrollVal"
         title="云鹊奖"
+        :baseShowHeight="25"
         :shareObj="shareObj"
+        :setedScroll="true"
      />
     <div id="imgHeight1">
         <img src="../assets/img/img1.png" />
@@ -79,18 +81,6 @@ export default {
   },
   components: {
     h5header
-  },
-  asyncData(params){
-    return {
-        shareObj: {
-            shareUrl: 'http://' + params.req.host + params.req.originalUrl,
-            title1: '年终活动-标题',
-            title2: '年终活动-文字描述',
-            shareImageUrl: 'https://test-file.yunqueyi.com/png/2019/11/18/1574046505000_48x48.png'
-        }
-    }
-
-
   },
   data() {
     return {
@@ -100,20 +90,26 @@ export default {
         hospitalIdCnt: '',
         scrollVal: 0,
         isWeb: false,
+        shareObj: {}
     }
   },
   created(){
-    // window.__refresh = function() {
-    //     window.reolad();
-    // };
     getCnt().then(res=>{
         if(res.code=='000000'){
             this.doctorIdCnt = res.data.doctorIdCnt;
             this.hospitalIdCnt = res.data.hospitalIdCnt;
+        }else{
+            this.$toast(res.message)
         }
     });
   },
   mounted() {
+    this.shareObj = {
+        shareUrl: window.location.href,
+        title1: '年终活动-标题',
+        title2: '年终活动-文字描述',
+        shareImageUrl: 'https://test-file.yunqueyi.com/png/2019/11/18/1574046505000_48x48.png'
+    }
     this.isWeb = this.$rocNative.isWeb;
     this.$rocNative.getToken().then(res => {
         const { userToken } = res;