antd mobile(七) 固定NavBar

妖狐艹你老母 2022-06-10 11:38 378阅读 0赞

只能说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中，足以以假乱真咯。