Taro 自定义顶部导航

最新推荐文章于 2023-12-11 16:32:24 发布

潇潇星雨

最新推荐文章于 2023-12-11 16:32:24 发布

阅读量1k

点赞数

分类专栏： Taro 文章标签： javascript react.js css

本文链接：https://blog.csdn.net/weixin_44629546/article/details/125206213

版权

Taro 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述

tsx部分

import { FC, useState, useEffect } from 'react';
import { View, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.scss';

const CustomBar: FC<any> = ({ children, isBack }) => {
    const [navBarHeight, setNavBarHeight] = useState<any>(24);
    const [menuBottonHeight, setmenuBottonHeight] = useState<any>(32);
    useEffect(() => {
        getNavHeight();
    }, []);
    const getNavHeight = () => {
        let { height: menuHeight, top: menuBottonTop } = Taro.getMenuButtonBoundingClientRect();
        setmenuBottonHeight(menuHeight || 32);
        setNavBarHeight(menuBottonTop || 24);
    };
    const goBackPage = () => {
        Taro.navigateBack({
            delta: 1,
        });
    };

    return (
        <View style={{ paddingTop: navBarHeight + 'px', height: menuBottonHeight + 'px' }} className='CustomBar_com'>
            {isBack && <Image onClick={goBackPage} className='back_' src={require('@assets/images/list/back_.png')}></Image>}
            {children}
        </View>
    );
};
export default CustomBar;

css部分

.CustomBar_com{
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .back_{
        width: 20px;
        height: 34px;
        margin-right: 40px;
    }
}