update: H5新增transparentTitle配置

src/core/view/bridge/subscribe/index.js

@@ -27,7 +27,7 @@ const passiveOptions = supportsPassive ? {
 function updateCssVar (vm) {
   if (uni.canIUse('css.var')) {
     const pageVm = vm.$parent.$parent
-    const windowTop = pageVm.showNavigationBar && pageVm.navigationBar.type !== 'transparent' ? (NAVBAR_HEIGHT +
+    const windowTop = pageVm.showNavigationBar && pageVm.navigationBar.type !== 'transparent' && pageVm.navigationBar.type !== 'alwaysTransparent' ? (NAVBAR_HEIGHT +
         'px')
       : '0px'
     const windowBottom = getApp().$children[0].showTabBar ? (TABBAR_HEIGHT + 'px') : '0px'
@@ -74,8 +74,8 @@ export default function initSubscribe (subscribe) {
       const enablePageReachBottom = hasLifecycleHook(vm.$options, 'onReachBottom')
       const onReachBottomDistance = pageVm.onReachBottomDistance
 
-      const enableTransparentTitleNView = isPlainObject(pageVm.titleNView) && pageVm.titleNView.type ===
-        'transparent'
+      const enableTransparentTitleNView = (isPlainObject(pageVm.titleNView) && pageVm.titleNView.type ===
+        'transparent') || (isPlainObject(pageVm.navigationBar) && pageVm.navigationBar.type === 'transparent')
 
       if (scrollListener) {
         document.removeEventListener('scroll', scrollListener)

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

@@ -136,9 +136,19 @@ export default {
     titleImage: {
       type: String,
       default: ''
+    },
+    transparentTitle: {
+      type: String,
+      default: 'none'
     }
   },
-  data () {
+  data () {
+    const titleNViewTypeList = {
+      'none': 'default',
+      'auto': 'transparent',
+      'always': 'alwaysTransparent'
+    }
+
     const navigationBar = mergeTitleNView({
       loading: false,
       backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
@@ -147,7 +157,8 @@ export default {
       titleText: this.navigationBarTitleText,
       titleImage: this.titleImage,
       duration: '0',
-      timingFunc: ''
+      timingFunc: '',
+      type: titleNViewTypeList[this.transparentTitle]
     }, this.titleNView)
 
     const showNavigationBar = this.navigationStyle === 'default' && this.titleNView

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

@@ -36,7 +36,7 @@
         v-if="!searchInput"
         class="uni-page-head-bd">
         <div
-          :style="{fontSize:titleSize,opacity:type==='transparent'?0:1}"
+          :style="{fontSize:titleSize}"
           class="uni-page-head__title"
         >
           <i
@@ -96,7 +96,7 @@
       </div>
     </div>
     <div
-      v-if="type!=='transparent'"
+      v-if="type!=='transparent'&&type!=='alwaysTransparent'"
       class="uni-placeholder"/>
   </uni-page-head>
 </template>
@@ -277,7 +277,7 @@ uni-page-head .uni-page-head__title .uni-loading {
 
 uni-page-head .uni-page-head__title .uni-page-head__title_image {
   width: auto;
-  height: 20px;
+  height: 26px;
   vertical-align: middle;
 }
 </style>
@@ -335,7 +335,7 @@ export default {
     type: {
       default: 'default',
       validator (value) {
-        return ['default', 'transparent'].indexOf(value) !== -1
+        return ['default', 'transparent', 'alwaysTransparent'].indexOf(value) !== -1
       }
     },
     coverage: {

src/platforms/h5/components/page/transparent.js

@@ -6,7 +6,7 @@ export default {
   mounted () {
     if (this.type === 'transparent') {
       const transparentElemStyle = this.$el.querySelector('.uni-page-head-transparent').style
-      const titleElem = this.$el.querySelector('.uni-page-head__title')
+      // const titleElem = this.$el.querySelector('.uni-page-head__title')
       const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
       const iconElemsStyles = []
       const textColor = this.textColor
@@ -40,9 +40,10 @@ export default {
         }
         this._A = alpha
         // TODO 暂时仅处理背景色
-        if (titleElem) {
-          titleElem.style.opacity = alpha
-        }
+        // 对齐支付宝小程序，标题不透明渐变
+        // if (titleElem) {
+        //   titleElem.style.opacity = alpha
+        // }
         transparentElemStyle.backgroundColor = `rgba(${this._R},${this._G},${this._B},${alpha})`
         borderRadiusElemsStyles.forEach(function (borderRadiusElemStyle, index) {
           let oldColor = oldColors[index]
@@ -52,17 +53,31 @@ export default {
           borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
         })
       })
+    } else if (this.type === 'alwaysTransparent') {
+      const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
+      const iconElemsStyles = []
+      for (let i = 0; i < iconElems.length; i++) {
+        iconElemsStyles.push(iconElems[i].style)
+      }
+      const borderRadiusElems = this.$el.querySelectorAll('.uni-page-head-btn')
+      const oldColors = []
+      const borderRadiusElemsStyles = []
+      for (let i = 0; i < borderRadiusElems.length; i++) {
+        let borderRadiusElem = borderRadiusElems[i]
+        oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
+        borderRadiusElemsStyles.push(borderRadiusElem.style)
+      }
     }
   },
   computed: {
     color () {
-      return this.type === 'transparent' ? '#fff' : this.textColor
+      return this.type === 'transparent' || this.type === 'alwaysTransparent' ? '#fff' : this.textColor
     },
     offset () {
       return parseInt(this.coverage)
     },
     bgColor () {
-      if (this.type === 'transparent') {
+      if (this.type === 'transparent' || this.type === 'alwaysTransparent') {
         const {
           r,
           g,

src/platforms/h5/helpers/get-window-offset.js

@@ -17,7 +17,7 @@ export default function getWindowOffset () {
   const pages = getCurrentPages()
   if (pages.length) {
     const pageVm = pages[pages.length - 1].$parent.$parent
-    top = pageVm.showNavigationBar && pageVm.navigationBar.type !== 'transparent' ? NAVBAR_HEIGHT : 0
+    top = pageVm.showNavigationBar && (pageVm.navigationBar.type !== 'transparent' || pageVm.navigationBar.type !== 'alwaysTransparent') ? NAVBAR_HEIGHT : 0
   }
   const app = getApp()
   if (app) {