微信小程序自定义Navbar（Taro可直接使用）

image.png

import React, { useState, useEffect } from "react";
import Taro, { useRouter, useDidShow } from "@tarojs/taro";
import { Input, View } from "@tarojs/components";
import { AtNavBar } from 'taro-ui'
import './index.scss'

function NavBar(porps) {
    // 获取系统信息
    const systemInfo = Taro.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
    const [info, setInfo] = useState([0, 0, 0, 0, '#FFF', '#000']);// 导航栏高度 ,胶囊距右方间距（方保持左、右间距一致）,胶囊距底部间距（保持底部间距一致）,胶囊高度（自定义内容可与胶囊高度保证一致）
    const [type, setType] = useState('text');
    let _navBarHeight = ((menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight) || 0;
    let _menuRight = (systemInfo.screenWidth - menuButtonInfo.right) || 0;
    let _menuBotton = (menuButtonInfo.top - systemInfo.statusBarHeight) || 0;
    let _menuHeight = (menuButtonInfo.height) || 0;
    useEffect(() => {
        let _bgColor = '#FFF'; //背景
        let _color = '#000'; // 字体颜色
        let _type = 'text'; // 组建类型
        if (porps.bgColor) _bgColor = porps.bgColor;
        if (porps.color) _color = porps.color;

        setInfo([_navBarHeight, _menuRight, _menuBotton/2, _menuHeight, _bgColor, _color]);
        if (porps.type) _type = porps.type;
        return () => { };
    }, []);

    return (
        
            
                {
                    // bottom: `${info[2]}px`
                    type == 'text' ? {porps.title} :
                        
                }
            
            {/* 是否顶起顶部高度 */}
            {
                porps.seize ?  : null
            }
        
    );
}

export default NavBar;

.nav-bar{ position: fixed; width: 100%; top: 0; z-index: 1000;border-bottom: solid 1px #f8f8f8;}
.nav-bar .search{ width: 60%;  font-size: 32px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}
.nav-bar .text{ width: 100%;  font-size: 32px; background: #fff; position: absolute; text-align: center;}