美文网首页
taro 自定义头部 height

taro 自定义头部 height

作者: lovelydong | 来源:发表于2020-06-15 11:37 被阅读0次

    参考 https://www.jianshu.com/p/9822d9ee168e

    import Taro, { Component } from '@tarojs/taro';
    import { View, Text, Button } from '@tarojs/components';
    import api from '../../service/api';
    import TabBar from "../../tabBar/tabBar";
    import { AtActionSheet, AtActionSheetItem } from 'taro-ui'
    export default class My extends Component {
      
      constructor(props) {
        super(props)
        this.state = {
          selected:1,
          statusBarHeight:null,
          barHeight:null
          
    
        }
      }
    
      config = {
        navigationBarTitleText: '我的',
        navigationStyle: 'custom'
      };
      componentWillMount(){
        const { top, height } = wx.getMenuButtonBoundingClientRect()
        const { statusBarHeight, platform } = wx.getSystemInfoSync()
        let navigationBarHeight;
        if (top && top !== 0 && height && height !== 0) {
          navigationBarHeight = (top - statusBarHeight) * 2 + height
        } else {
        if(platform === 'android'){
          navigationBarHeight = 48;
        }else{
          navigationBarHeight = 40;
        }
      }
      
      this.setState({
        statusBarHeight:statusBarHeight,
        barHeight:navigationBarHeight
      })
      
      }
      componentDidMount() {
       if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
          this.$scope.getTabBar().$component.setState({
            selected: 1
          })
        }  
       
      }
      componentDidShow () {
        
      }
     render() {
        
        
        return (
          <View>
          <View className='navbarWrap' style={{paddingTop:this.state.statusBarHeight+"px"}}>
            <View className='navbar' style={{lineHeight:this.state.barHeight+"px"}}>自定义导航栏</View>
            <TabBar ind={this.state.selected} />
          </View>
          </View>
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:taro 自定义头部 height

          本文链接:https://www.haomeiwen.com/subject/pkycxktx.html