赞
踩
默认头部样式
引入公共组件自定义样式
- import { useEffect, useState } from "react";
- import Taro from "@tarojs/taro";
- import { View, Image } from "@tarojs/components";
- import "./index.scss";
-
- interface CustomerHeaderProps {
- /**
- * 非必填 左边节点
- * */
- backNode?: React.ReactNode | string;
-
- /**
- * 标题
- * */
- title?:React.ReactNode | string
-
- /**
- * 图标
- * */
- Icon?:string
- }
-
- const CustomerHeader: React.FC<CustomerHeaderProps> = (
- props: CustomerHeaderProps
- ) => {
- const globalData:any = {}
- const { backNode,title,Icon } = props;
- const backIcon: any = '返回icon地址'
- const [navbarHeight, setnavbarHeight] = useState<number>(0); // 顶部导航栏高度
- const [cusnavH, setcusnavH] = useState<number>(0);
- const [statusBarHeight, setstatusBarHeight] = useState<number>(0);
- // console.log(navbarBtn);
- useEffect(() => {
- globalData.systeminfo = Taro.getSystemInfoSync();
- console.log('globalData', globalData);
- if (!globalData.headerBtnPosi)
- globalData.headerBtnPosi = Taro.getMenuButtonBoundingClientRect();
- let newstatusBarHeight = globalData.systeminfo.statusBarHeight; // 状态栏高度
- let headerPosi = globalData.headerBtnPosi; // 胶囊位置信息
- let btnPosi = {
- // 胶囊实际位置,坐标信息不是左上角原点
- height: headerPosi.height,
- width: headerPosi.width,
- top: headerPosi.top - newstatusBarHeight, // 胶囊top - 状态栏高度
- bottom: headerPosi.bottom - headerPosi.height - newstatusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height (胶囊实际bottom 为距离导航栏底部的长度)
- right: globalData.systeminfo.windowWidth - headerPosi.right // 这里不能获取 屏幕宽度,PC端打开小程序会有BUG,要获取窗口高度 - 胶囊right
- };
-
- const newcusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom; // 导航高度
- const newnavbarHeight = headerPosi.bottom + btnPosi.bottom; // 胶囊bottom + 胶囊实际bottom
- setnavbarHeight(newnavbarHeight);
- setcusnavH(newcusnavH);
- setstatusBarHeight(newstatusBarHeight);
- }, []);
-
- const back = ()=>{
- Taro.navigateBack()
- }
- return (
- <View className='custom_nav'>
- <View className='custom_nav_box' style={{ height: `${navbarHeight}px` }}>
- <View
- className='custom_nav_bar'
- style={{
- top: `${statusBarHeight}px`,
- height: `${cusnavH}px`,
- lineHeight: `${cusnavH}px`
- }}
- >
- <View className='nav_warp'>
- {backNode ? backNode : <Image className='icon' src={Icon || backIcon} onClick={back} />}
- <View className='title'>{title || '默认值'}</View>
- </View>
- </View>
- </View>
- </View>
- );
- };
- export default CustomerHeader;
-
-
- .custom_nav{
- width: 100%;
- background: #fff;
- position: relative;
- z-index: 99999;
- .custom_nav_box{
- position: fixed;
- width: 100%;
- background: #fff;
- z-index: 99999;
- border-bottom: 1px solid #ccc;
- }
- .custom_nav_bar {
- position: relative;
- z-index: 9;
- }
- .nav_warp{
- display: flex;
- align-items: center;
- position: relative;
- .icon{
- padding-left: 24px;
- width: 40px;
- height: 40px;
- }
- .title{
- flex: 0.9;
- font-size: 28px;
-
- text-align: center;
- }
-
- }
-
- }
-
- import React, { useEffect } from "react";
- import { View } from "@tarojs/components"
- import CustomerHeader from '../../components/CustomerHeader'
- import './index.scss'
-
- interface Props {
-
- }
-
- const Chat: React.FC<Props> = () => {
-
- useEffect(() => {
-
-
- }, [])
-
- return (
- <>
- <CustomerHeader />
- <View className='controller'>
-
- </View>
- </>
- )
- }
- export default Chat
-
- import React, { useEffect } from "react";
- import { View, Image, Text } from "@tarojs/components"
- import CustomerHeader from '../../components/CustomerHeader'
- import './index.scss'
-
- interface Props {
-
- }
-
- const Chat: React.FC<Props> = () => {
- const backIcon: any = '返回icon地址'
- const userList = [
- {
- id: 1,
- avatarImg:'地址'
- },
- {
- id: 2,
- avatarImg:'地址'
- },
- {
- id: 3,
- avatarImg:'地址'
- },
- ]
- useEffect(() => {
-
-
- }, [])
-
- const back = () => {
- console.log('自定义事件')
- }
- return (
- <>
- <CustomerHeader
- backNode={
- <>
- <Image className='icon' src={backIcon} onClick={back} />
- <Text className='backText'>XXX</Text>
- </>
- }
- title={
- <View className='user_warp'>
- {
- userList?.map((item: any, index: number) => (
- <View className='avatarImg_warp'
- style={{
- zIndex: userList.length - index
- }} key={item.id}
- >
- <Image className='user_avatarImg' src={item.avatarImg} onClick={back} />
- </View>
- ))
- }
- </View>
- }
-
- />
- <View className='controller'>
-
- </View>
- </>
- )
- }
- export default Chat
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。