antd mobile(七) 固定NavBar

只能说antd mobile真的是为淘宝内部写的框架，竟然连固定NavBar显示的接口都没暴露出来。也就是NavBar不跟着屏幕滚动而滚动。

说实话如果是用reactNative 开发当然不需要该接口，但问题是现在项目是做需要挂在微信端使用的，如果不固定NavBar基本是没法使用。

第一步：其实固定NavBar非常简单，只要修改下css控制即可：我把下面这段css内容放在了Container.css里面

.am-navbar{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 0.9rem;
  background-color: #717176;
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  color: #fff;
}

第二步：由于将navBar变成flexd后，会遮盖相应控件，所以需要修改下appPage组件容器的上边距：

   <div style={{marginTop:".89rem"}}>
           {
             this.props.children
           }
         </div>

AppPage.js完整代码应该就是：

import  React,{Component} from 'react';
import { connect,dispatch } from 'react-redux' // 引入connect

import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import style from "./Container.css";

class App extends Component {
  constructor(props, context) {
    super(props, context);
  }

  componentWillMount() {
    document.body.style.margin = "0px";
     这是防止页面被拖拽
    //document.body.addEventListener('touchmove', (ev) => {
    //  ev.preventDefault();
    //});
  }

  render() {
    let {animateCls,pageNavTitle}=this.props.AppMd.AppMd;

    return (
      <ReactCSSTransitionGroup
        transitionName={animateCls}
        component="div"
        transitionEnterTimeout={400}
        transitionLeaveTimeout={400}>
        <div key={this.props.location.pathname}
             style={{position:"absolute", width: "100%"}}>
         <div style={{marginTop:".89rem"}}>
           {
             this.props.children
           }
         </div>
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}
// 利用connect将组件与Redux绑定起来
export default connect((AppMd) => ({AppMd}))(App)

这下就搞定了，navBar就不会跟着屏幕滚动了，这样将界面嵌入到app中，足以以假乱真咯。