美文网首页
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