From 2bda7de673259c89626600ef33ad59ea7a4964bb Mon Sep 17 00:00:00 2001
From: fxy060608 <fxy060608@gmail.com>
Date: Fri, 6 Aug 2021 11:24:30 +0800
Subject: [PATCH] fix(h5): change svg icon color when navigation bar
 transparent

---
 packages/uni-h5/dist/uni-h5.es.js             | 16 +++++++--------
 .../framework/components/page/transparent.ts  | 20 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/uni-h5/dist/uni-h5.es.js b/packages/uni-h5/dist/uni-h5.es.js
index 9de0a2525..e5f309a21 100644
--- a/packages/uni-h5/dist/uni-h5.es.js
+++ b/packages/uni-h5/dist/uni-h5.es.js
@@ -20565,7 +20565,7 @@ function usePageHeadTransparent(headRef, {
   const offset = parseInt(coverage);
   let titleElem;
   let transparentElemStyle;
-  const iconElemsStyles = [];
+  const iconElemsPaths = [];
   const borderRadiusElemsStyles = [];
   const oldColors = [];
   onMounted(() => {
@@ -20573,9 +20573,9 @@ function usePageHeadTransparent(headRef, {
     transparentElemStyle = $el.style;
     titleElem = $el.querySelector(".uni-page-head__title");
     const borderRadiusElems = $el.querySelectorAll(".uni-page-head-btn");
-    const iconElems = $el.querySelectorAll(".uni-btn-icon");
-    for (let i = 0; i < iconElems.length; i++) {
-      iconElemsStyles.push(iconElems[i].style);
+    const iconSvgElems = $el.querySelectorAll("svg path");
+    for (let i = 0; i < iconSvgElems.length; i++) {
+      iconElemsPaths.push(iconSvgElems[i]);
     }
     for (let i = 0; i < borderRadiusElems.length; i++) {
       const borderRadiusElem = borderRadiusElems[i];
@@ -20589,12 +20589,12 @@ function usePageHeadTransparent(headRef, {
       return;
     }
     if (alpha > 0.5 && A <= 0.5) {
-      iconElemsStyles.forEach(function(iconElemStyle) {
-        iconElemStyle.color = titleColor;
+      iconElemsPaths.forEach(function(iconElemPath) {
+        iconElemPath.setAttribute("fill", titleColor);
       });
     } else if (alpha <= 0.5 && A > 0.5) {
-      iconElemsStyles.forEach(function(iconElemStyle) {
-        iconElemStyle.color = "#fff";
+      iconElemsPaths.forEach(function(iconElemPath) {
+        iconElemPath.setAttribute("fill", "#fff");
       });
     }
     A = alpha;
diff --git a/packages/uni-h5/src/framework/components/page/transparent.ts b/packages/uni-h5/src/framework/components/page/transparent.ts
index ca20ea828..3766926a6 100644
--- a/packages/uni-h5/src/framework/components/page/transparent.ts
+++ b/packages/uni-h5/src/framework/components/page/transparent.ts
@@ -19,7 +19,7 @@ export function usePageHeadTransparent(
   const offset = parseInt(coverage!)
   let titleElem: HTMLDivElement
   let transparentElemStyle: CSSStyleDeclaration
-  const iconElemsStyles: CSSStyleDeclaration[] = []
+  const iconElemsPaths: SVGPathElement[] = []
   const borderRadiusElemsStyles: CSSStyleDeclaration[] = []
   const oldColors: string[] = []
   onMounted(() => {
@@ -29,11 +29,11 @@ export function usePageHeadTransparent(
     const borderRadiusElems = $el.querySelectorAll(
       '.uni-page-head-btn'
     ) as NodeListOf<HTMLElement>
-    const iconElems = $el.querySelectorAll(
-      '.uni-btn-icon'
-    ) as NodeListOf<HTMLElement>
-    for (let i = 0; i < iconElems.length; i++) {
-      iconElemsStyles.push(iconElems[i].style)
+    const iconSvgElems = $el.querySelectorAll(
+      'svg path'
+    ) as NodeListOf<SVGPathElement>
+    for (let i = 0; i < iconSvgElems.length; i++) {
+      iconElemsPaths.push(iconSvgElems[i])
     }
     for (let i = 0; i < borderRadiusElems.length; i++) {
       const borderRadiusElem = borderRadiusElems[i]
@@ -47,12 +47,12 @@ export function usePageHeadTransparent(
       return
     }
     if (alpha > 0.5 && A <= 0.5) {
-      iconElemsStyles.forEach(function (iconElemStyle) {
-        iconElemStyle.color = titleColor!
+      iconElemsPaths.forEach(function (iconElemPath) {
+        iconElemPath.setAttribute('fill', titleColor!)
       })
     } else if (alpha <= 0.5 && A > 0.5) {
-      iconElemsStyles.forEach(function (iconElemStyle) {
-        iconElemStyle.color = '#fff'
+      iconElemsPaths.forEach(function (iconElemPath) {
+        iconElemPath.setAttribute('fill', '#fff')
       })
     }
     A = alpha
-- 
GitLab