fix: 解决透明渐变导航栏按钮背景色和文字颜色配置不生效的问题

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

@@ -8,6 +8,7 @@
       <div class="uni-page-head-hd">
         <div
           v-show="backButton"
+          class="uni-page-head-btn"
           @click="_back">
           <i
             :style="{color:color,fontSize:'27px'}"
@@ -17,7 +18,8 @@
           <div
             v-if="btn.float === 'left'"
             :key="index"
-            :style="{marginRight:index>0?'5px':'0px'}">
+            :style="{marginRight:index>0?'5px':'0px',backgroundColor: btn.background}"
+            class="uni-page-head-btn">
             <i
               :style="_formatBtnStyle(btn)"
               class="uni-btn-icon"
@@ -59,16 +61,18 @@
           :placeholder-style="`color:${searchInput.placeholderColor}`"
           class="uni-page-head-search-input"
           confirm-type="search"
-          @focus="__focus"
-          @blur="__blur"
-          @input="__input"
+          @focus="_focus"
+          @blur="_blur"
+          @input="_input"
         />
       </div>
       <div class="uni-page-head-ft">
         <template v-for="(btn,index) in btns">
           <div
             v-if="btn.float !== 'left'"
-            :key="index">
+            :key="index"
+            :style="{backgroundColor: btn.background}"
+            class="uni-page-head-btn">
             <i
               :style="_formatBtnStyle(btn)"
               class="uni-btn-icon"
@@ -143,12 +147,13 @@ uni-page-head .uni-page-head-bd {
   user-select: auto;
 }
 
-.uni-btn-icon {
+.uni-page-head-btn {
   max-width: 48px;
   word-break: keep-all;
   margin: 0 2px;
   overflow: hidden;
   word-break: keep-all;
+  background-color: rgba(153,153,153,1);
 }
 
 .uni-page-head-search {
@@ -383,13 +388,13 @@ export default {
       }
       return style
     },
-    __focus () {
+    _focus () {
       this.focus = true
     },
-    __blur () {
+    _blur () {
       this.focus = false
     },
-    __input () {
+    _input () {
       UniServiceJSBridge.emit('onNavigationBarSearchInputChanged', {
         text: this.text
       })

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

@@ -9,13 +9,17 @@ export default {
       const titleElem = this.$el.querySelector('.uni-page-head__title')
       const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
       const iconElemsStyles = []
+      const textColor = this.textColor
       for (let i = 0; i < iconElems.length; i++) {
         iconElemsStyles.push(iconElems[i].style)
       }
-      const borderRadiusElems = this.$el.querySelectorAll('.uni-page-head-hd>div,.uni-page-head-ft>div')
+      const borderRadiusElems = this.$el.querySelectorAll('.uni-page-head-btn')
+      const oldColors = []
       const borderRadiusElemsStyles = []
       for (let i = 0; i < borderRadiusElems.length; i++) {
-        borderRadiusElemsStyles.push(borderRadiusElems[i].style)
+        let borderRadiusElem = borderRadiusElems[i]
+        oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
+        borderRadiusElemsStyles.push(borderRadiusElem.style)
       }
       this._A = 0
       UniViewJSBridge.on('onPageScroll', ({
@@ -27,7 +31,7 @@ export default {
         }
         if (alpha > 0.5 && this._A <= 0.5) {
           iconElemsStyles.forEach(function (iconElemStyle) {
-            iconElemStyle.color = '#000'
+            iconElemStyle.color = textColor
           })
         } else if (alpha <= 0.5 && this._A > 0.5) {
           iconElemsStyles.forEach(function (iconElemStyle) {
@@ -40,8 +44,11 @@ export default {
           titleElem.style.opacity = alpha
         }
         transparentElemStyle.backgroundColor = `rgba(${this._R},${this._G},${this._B},${alpha})`
-        borderRadiusElemsStyles.forEach(function (borderRadiusElemStyle) {
-          borderRadiusElemStyle.backgroundColor = `rgba(153,153,153,${1 - alpha})`
+        borderRadiusElemsStyles.forEach(function (borderRadiusElemStyle, index) {
+          let oldColor = oldColors[index]
+          let rgba = oldColor.match(/\d+/g)
+          rgba[3] = (1 - alpha) * (rgba.length === 4 ? rgba[3] : 1)
+          borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
         })
       })
     }