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