fix: 修复 H5 navigationBarShadow 配置不生效的问题 fixed #607

src/platforms/h5/components/page/index.vue

@@ -7,13 +7,15 @@
       v-if="enablePullDownRefresh"
       ref="refresh"
       :color="refreshOptions.color"
-      :offset="refreshOptions.offset" />
+      :offset="refreshOptions.offset"
+    />
     <page-body
       v-if="enablePullDownRefresh"
       @touchstart.native="_touchstart"
       @touchmove.native="_touchmove"
       @touchend.native="_touchend"
-      @touchcancel.native="_touchend">
+      @touchcancel.native="_touchend"
+    >
       <slot name="page" />
     </page-body>
     <page-body v-else>
@@ -22,11 +24,11 @@
   </uni-page>
 </template>
 <style>
-  uni-page {
+uni-page {
   display: block;
   width: 100%;
   height: 100%;
-  }
+}
 </style>
 <script>
 import {
@@ -146,6 +148,12 @@ export default {
     titlePenetrate: {
       type: String,
       default: 'NO'
+    },
+    navigationBarShadow: {
+      type: Object,
+      default () {
+        return {}
+      }
     }
   },
   data () {
@@ -180,6 +188,7 @@ export default {
       timingFunc: '',
       titlePenetrate: yesNoParseList[this.titlePenetrate]
     }, titleNView)
+    navigationBar.shadow = this.navigationBarShadow
 
     const refreshOptions = Object.assign({
       support: true,

src/platforms/h5/components/page/pageHead.vue

@@ -2,7 +2,7 @@
   <uni-page-head :uni-page-head-type="type">
     <div
       :style="{transitionDuration:duration,transitionTimingFunction:timingFunc,backgroundColor:bgColor,color:textColor}"
-      :class="{'uni-page-head-transparent':type==='transparent','uni-page-head-titlePenetrate': titlePenetrate}"
+      :class="headClass"
       class="uni-page-head"
     >
       <div class="uni-page-head-hd">
@@ -302,6 +302,44 @@ uni-page-head .uni-page-head__title .uni-page-head__title_image {
   height: 26px;
   vertical-align: middle;
 }
+
+uni-page-head .uni-page-head-shadow {
+  overflow: visible;
+}
+
+uni-page-head .uni-page-head-shadow::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 5px;
+  background-size: 100% 100%;
+}
+
+uni-page-head .uni-page-head-shadow-grey::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-grey.png");
+}
+
+uni-page-head .uni-page-head-shadow-blue::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-blue.png");
+}
+
+uni-page-head .uni-page-head-shadow-green::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-green.png");
+}
+
+uni-page-head .uni-page-head-shadow-orange::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-orange.png");
+}
+
+uni-page-head .uni-page-head-shadow-red::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-red.png");
+}
+
+uni-page-head .uni-page-head-shadow-yellow::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-yellow.png");
+}
 </style>
 <script>
 import appendCss from 'uni-platform/helpers/append-css'
@@ -385,6 +423,12 @@ export default {
     titlePenetrate: {
       type: Boolean,
       default: false
+    },
+    shadow: {
+      type: Object,
+      default () {
+        return {}
+      }
     }
   },
   data () {
@@ -425,6 +469,18 @@ export default {
         })
       }
       return btns
+    },
+    headClass () {
+      const shadowColorType = this.shadow.colorType
+      const data = {
+        'uni-page-head-transparent': this.type === 'transparent',
+        'uni-page-head-titlePenetrate': this.titlePenetrate,
+        'uni-page-head-shadow': shadowColorType
+      }
+      if (shadowColorType) {
+        data[`uni-page-head-shadow-${shadowColorType}`] = shadowColorType
+      }
+      return data
     }
   },
   mounted () {