自定义状态栏

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,
+        statusBarHeight,
-        screenWidth: res.screenWidth,
+        screenWidth,
-        screenHeight: res.screenHeight,
+        screenHeight,
-        windowHeight: res.windowHeight,
+        windowHeight,
-        safeArea: res.safeArea,
+        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;
+  margin-bottom: 20rpx;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  padding-left: 20rpx;
-  z-index: 99999999999;
-  overflow: hidden;
 
   &: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,35 +30,32 @@ const Home: FC = () => {
     })
     setTimeout(() => {
       setEnable(false)
-    }, 300)
+    }, 600)
   })
 
   return (
-    <View className={styles.content} style={{paddingTop: `${globalData.statusBarHeight + 60}px`}}>
+    <>
-      <Spin enable={enable} overlay/>
+      <NavigationBar className={styles.header} leftNode={<Image src={logo} style={{height: "80%"}} mode='heightFix'/>} cancelBack/>
-      <View className={styles.header}
+      <View className={styles.content}>
-            style={{padding: `${globalData.statusBarHeight + 5}px 0 5px 20rpx`, height: `${titleBarHeight - 10}px`}}>
+        <Spin enable={enable} overlay/>
-        <Image style={{width: `${titleBarHeight - 10}px`, height: `${titleBarHeight - 10}px`}}
+        <Adware data={data?.adverts || []} only_flag='routine_home_top_banner' width={710}/>
-               src={logo}
+        <Feature/>
-               mode='aspectFit'/>
+        <FeatureRecommended
+          illness={data?.illness.list || []}
+          health={data?.health || []}
+          brand={data?.brand.list || []}
+          skill={data?.skill || []}
+        />
+        <Adware data={data?.adverts || []} only_flag='routine_home_recommend_banner' width={710}/>
+        {data && <CurRecommended/>}
+        {
+          !token && <View className={styles.tipsLogin} onClick={unLogin}>
+            <View>登录后享受更多服务~</View>
+            <MyButton fillet size='mini'>立即登录</MyButton>
+          </View>
+        }
       </View>
-      <Adware data={data?.adverts || []} only_flag='routine_home_top_banner' width={710}/>
+    </>
-      <Feature/>
-      <FeatureRecommended
-        illness={data?.illness.list || []}
-        health={data?.health || []}
-        brand={data?.brand.list || []}
-        skill={data?.skill || []}
-      />
-      <Adware data={data?.adverts || []} only_flag='routine_home_recommend_banner' width={710}/>
-      {data && <CurRecommended/>}
-      {
-        !token && <View className={styles.tipsLogin} onClick={unLogin}>
-          <View>登录后享受更多服务~</View>
-          <MyButton fillet size='mini'>立即登录</MyButton>
-        </View>
-      }
-    </View>
   )
 }
 

src/pages/my/my.tsx

@@ -13,34 +13,34 @@ import {userApi} from "@/api";
 
 const My: FC = () => {
   const globalData = Taro.getApp().globalData
-  const {token,company,setCompany} = Profile.useContainer()
+  const {token, company, setCompany} = Profile.useContainer()
-  const [companyShow,setCompanyShow] = useState(false)
+  const [companyShow, setCompanyShow] = useState(false)
-  const [companyList,setCompanyList] = useState<Company[]>([])
+  const [companyList, setCompanyList] = useState<Company[]>([])
   Taro.useDidShow(() => {
-      try {
+    try {
-        userApi.companyList().then(res => {
+      userApi.companyList().then(res => {
-          setCompanyList(res as Company[])
+        setCompanyList(res as Company[])
-        })
+      })
-      } catch (e) {
+    } catch (e) {
-      }
+    }
   })
 
   return (
     <View className={styles.content} style={`paddingTop:${globalData.statusBarHeight}px`}>
-      { !token ?
+      {
-        <LoginView height={globalData.windowHeight-100}></LoginView>
+        !token ? <LoginView height={globalData.windowHeight - 100}></LoginView>
-        :
+          : <>
-        <>
+            <Header showCompany={() => setCompanyShow(true)}/>
-          <Header showCompany={()=>{setCompanyShow(true)}}/>
+            <Time/>
-          <Time/>
+            <Service/>
-          <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>
             )