feat: APP环境新增页面头部

engine-template/engine-h5-long/src/index.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="engine-template-wrapper is-long-page">
+    <van-nav-bar
+        v-if="isApp"
+        :title="pageTitle"
+        :class="{ 'use-white-head': isScroll }"
+        left-arrow
+        @click-left="onClickLeft"
+    >
+    </van-nav-bar>
+
     <div class="relative" v-for="(page, i) in pageData.pages" :key="i"
          :style="getCommonStyle(page.commonStyle)">
       <!--页面内容区域-->
@@ -22,10 +31,13 @@
 	import componentsTemplate from '../../components/components-template'
 	import $config from '@client/config'
 	import elementEvents from '@client/mixins/elementEvents'
-	export default {
+  import { NavBar } from "vant";
+
+  export default {
 		name: 'engineH5Long',
 		components: {
-			componentsTemplate
+			componentsTemplate,
+      [NavBar.name]: NavBar
 		},
 		mixins: [elementEvents],
 		data() {
@@ -35,19 +47,50 @@
 				pageData: {
 					pages: []
 				},
-				pageTop: 0
+				pageTop: 0,
+        isScroll: false
 			}
 		},
+    computed: {
+      pageTitle () {
+        return document.title
+      },
+      isApp () {
+        const ua = navigator.userAgent.toLowerCase()
+        let inNewApp = false
+
+        if (ua.includes('jianyuapp')) {
+          inNewApp = true
+        }
+        return inNewApp
+      }
+    },
 		created() {
 			this.pageData = window._pageData;
 			this.computedPageStyle()
 
       window.addEventListener('resize', this.computedPageStyle)
+      if (this.isApp) {
+        window.addEventListener('scroll', this.toggleAppHeader)
+      }
 		},
     destroyed() {
       window.removeEventListener('resize', this.computedPageStyle)
+      if (this.isApp) {
+        window.removeEventListener('scroll', this.toggleAppHeader)
+      }
     },
     methods: {
+      toggleAppHeader () {
+        if (window.scrollY > 23) {
+          this.isScroll = true
+        } else {
+          this.isScroll = false
+        }
+      },
+      onClickLeft () {
+        history.back()
+      },
       computedPageStyle () {
         let width = document.body.clientWidth
         if (width > 580) {
@@ -72,7 +115,31 @@
 	}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .is-long-page {
+    ::v-deep {
+      .van-nav-bar::after {
+        content: unset;
+      }
+      .van-nav-bar {
+        position: fixed;
+        width: 100%;
+        top: 0;
+        left: 0;
+        background: transparent;
+        color: #fff;
+        padding-top: 12px;
+        &.use-white-head {
+          background: #fff;
+          color: #1d1d1d;
+        }
+      }
+      .van-nav-bar .van-icon,
+      .van-nav-bar__title {
+        color: inherit;
+      }
+    }
+  }
   .engine-template-wrapper {
     position: relative;
     width: 100%;