自定义状态栏

src/app.tsx

@@ -39,13 +39,18 @@ function App(props) {
   })
 
   Taro.getSystemInfo({
-    success(res) {
+    success({statusBarHeight = 0, screenWidth, screenHeight, windowHeight, safeArea}) {
+      const isIos = Taro.getSystemInfoSync().platform === 'ios';
+      const {top, height} = Taro.getMenuButtonBoundingClientRect()
+      const textBarHeight = (top - statusBarHeight) * 2 + height
       Taro.getApp().globalData = {
-        statusBarHeight: res.statusBarHeight || 0,
-        screenWidth: res.screenWidth,
-        screenHeight: res.screenHeight,
-        windowHeight: res.windowHeight,
-        safeArea: res.safeArea,
+        statusBarHeight,
+        screenWidth,
+        screenHeight,
+        windowHeight,
+        safeArea,
+        isIos,
+        textBarHeight
       }
     }
   })

src/components/navigationBar/navigationBar.module.scss

@@ -0,0 +1,31 @@
+.navigation {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 750rpx;
+  padding-left: 20rpx;
+  z-index: 99999999999;
+  overflow: hidden;
+  background: #fff;
+}
+
+.leftNode {
+  position: absolute;
+  display: flex;
+  align-items: center;
+}
+
+.text {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.arrow {
+  width: 32px;
+  height: 32px;
+}

src/components/navigationBar/navigationBar.tsx

@@ -0,0 +1,51 @@
+import {Image, View} from "@tarojs/components";
+import React, {FC, useMemo} from "react";
+import styles from './navigationBar.module.scss'
+import Taro from "@tarojs/taro";
+import leftArrow from '@/static/img/leftArrow.png'
+
+interface Props {
+  // 文本
+  text?: string | JSX.Element
+  children?: JSX.Element
+  // 	左边节点
+  leftNode?: string | JSX.Element
+  // 字体颜色
+  color?: string
+  // 背景颜色
+  backgroundColor?: string
+  // 取消返回按钮
+  cancelBack?: boolean
+  // 跟随页面滚动
+  inherit?: boolean
+  className?: string
+}
+
+const NavigationBar: FC<Props> = (props) => {
+  const globalData = Taro.getApp().globalData
+  const navigationBarStyle = useMemo((): React.CSSProperties => ({
+    background: props.backgroundColor,
+    position: props.inherit ? 'inherit' : "sticky",
+    paddingTop: globalData.statusBarHeight + 'px',
+    height: globalData.textBarHeight + 'px',
+  }), [props])
+
+
+  const navigationTextStyle = useMemo((): React.CSSProperties => ({
+    color: props.color,
+    height: globalData.textBarHeight + 'px',
+  }), [props])
+
+
+  return (
+    <View className={`${props.className} ${styles.navigation}`} style={navigationBarStyle}>
+      <View style={navigationTextStyle} className={styles.leftNode}>
+        {!props.cancelBack && <Image src={leftArrow} mode='aspectFill' className={styles.arrow}/>}
+        {props.leftNode}
+      </View>
+      <View style={navigationTextStyle} className={styles.text}>{props.children || props.text}</View>
+    </View>
+  )
+}
+
+export default NavigationBar

src/pages/home/home.config.ts

@@ -2,6 +2,6 @@ export default definePageConfig({
   navigationBarTitleText: '康一诺',
   navigationStyle: 'custom',
   navigationBarBackgroundColor: '#92ecc5',
-  navigationBarTextStyle: 'white',
+  // navigationBarTextStyle: 'white',
   onReachBottomDistance: 50
 })

src/pages/home/home.module.scss

@@ -16,14 +16,7 @@
 }
 
 .header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  padding-left: 20rpx;
-  z-index: 99999999999;
-  overflow: hidden;
+  margin-bottom: 20rpx;
 
   &:after {
     min-height: 100vh;
@@ -45,7 +38,6 @@
   min-height: 90vh;
   box-sizing: border-box;
   width: 750rpx;
-  overflow: hidden;
 
   &:after {
     position: absolute;
@@ -106,7 +98,20 @@
   background: #fff;
   padding: 30rpx 0 30rpx 30rpx;
   margin-bottom: 40rpx;
-  border-radius: 30rpx;
+  border-radius: 20rpx;
+  position: relative;
+  overflow: hidden;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 40rpx;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
+  }
 }
 
 .featureTitle {

src/pages/home/home.tsx

@@ -11,15 +11,13 @@ import Taro from "@tarojs/taro";
 import {HomeApi, HomeData} from "@/api";
 import logo from '@/static/img/logo.png'
 import Spin from "@/components/spinner";
+import NavigationBar from "@/components/navigationBar/navigationBar";
 
 
 const Home: FC = () => {
-  const globalData = Taro.getApp().globalData
-  const {bottom, top} = Taro.getMenuButtonBoundingClientRect()
   const {token} = Profile.useContainer()
   const [data, setData] = useState<null | HomeData>(null)
   const [enable, setEnable] = useState(true)
-  const titleBarHeight = bottom + top - (globalData.statusBarHeight * 2)
 
   function unLogin() {
     Taro.clearStorage()
@@ -32,18 +30,14 @@ const Home: FC = () => {
     })
     setTimeout(() => {
       setEnable(false)
-    }, 300)
+    }, 600)
   })
 
   return (
-    <View className={styles.content} style={{paddingTop: `${globalData.statusBarHeight + 60}px`}}>
+    <>
+      <NavigationBar className={styles.header} leftNode={<Image src={logo} style={{height: "80%"}} mode='heightFix'/>} cancelBack/>
+      <View className={styles.content}>
         <Spin enable={enable} overlay/>
-      <View className={styles.header}
-            style={{padding: `${globalData.statusBarHeight + 5}px 0 5px 20rpx`, height: `${titleBarHeight - 10}px`}}>
-        <Image style={{width: `${titleBarHeight - 10}px`, height: `${titleBarHeight - 10}px`}}
-               src={logo}
-               mode='aspectFit'/>
-      </View>
         <Adware data={data?.adverts || []} only_flag='routine_home_top_banner' width={710}/>
         <Feature/>
         <FeatureRecommended
@@ -61,6 +55,7 @@ const Home: FC = () => {
           </View>
         }
       </View>
+    </>
   )
 }
 

src/pages/my/my.tsx

@@ -13,9 +13,9 @@ import {userApi} from "@/api";
 
 const My: FC = () => {
   const globalData = Taro.getApp().globalData
-  const {token,company,setCompany} = Profile.useContainer()
-  const [companyShow,setCompanyShow] = useState(false)
-  const [companyList,setCompanyList] = useState<Company[]>([])
+  const {token, company, setCompany} = Profile.useContainer()
+  const [companyShow, setCompanyShow] = useState(false)
+  const [companyList, setCompanyList] = useState<Company[]>([])
   Taro.useDidShow(() => {
     try {
       userApi.companyList().then(res => {
@@ -27,20 +27,20 @@ const My: FC = () => {
 
   return (
     <View className={styles.content} style={`paddingTop:${globalData.statusBarHeight}px`}>
-      { !token ?
-        <LoginView height={globalData.windowHeight-100}></LoginView>
-        :
-        <>
-          <Header showCompany={()=>{setCompanyShow(true)}}/>
+      {
+        !token ? <LoginView height={globalData.windowHeight - 100}></LoginView>
+          : <>
+            <Header showCompany={() => setCompanyShow(true)}/>
             <Time/>
             <Service/>
           </>
-
       }
 
-      <PageContainer overlayStyle={'background:rgba(0,0,0,0.3)'} position={'bottom'} round={true} show={companyShow} onClickOverlay={()=>{setCompanyShow(false)}}>
+      <PageContainer overlayStyle={'background:rgba(0,0,0,0.3)'} position={'bottom'} round={true} show={companyShow}
+                     onClickOverlay={() => setCompanyShow(false)}>
         <View className="px-3 py-5">
-          <View className="font-32 pb-3" style={{display:'flex',justifyContent:'center',borderBottom:'2rpx solid #f5f8f7'}}>选择公司</View>
+          <View className="font-32 pb-3"
+                style={{display: 'flex', justifyContent: 'center', borderBottom: '2rpx solid #f5f8f7'}}>选择公司</View>
           {
             companyList.length >= 1 &&
             companyList.map(d =>
@@ -58,7 +58,7 @@ const My: FC = () => {
                   showCancel: false,
                   success: function (res) {
                     if (res.confirm) {
-                      Taro.reLaunch({url:'/pages/my/my'})
+                      Taro.reLaunch({url: '/pages/my/my'})
                     }
                   }
                 })
@@ -69,8 +69,7 @@ const My: FC = () => {
                 </View>
                 <View className={styles.innerBox}>
                   <View className={styles.title}>{d.name}</View>
-                      <Image src={company?.id === d.id ? GreenNike: ''} className={styles.icon}></Image>
-
+                  <Image src={company?.id === d.id ? GreenNike : ''} className={styles.icon}></Image>
                 </View>
               </View>
             )