最近用react和antd mobile写一个h5,有个主菜单的,边上有三条横杆,点击弹出主菜单,效果大概是这样。这个是我实现后的效果,
边上的三条杠也是自己写的,css写的,网上很多,这个不多说了,直接说抽屉功能,官网地址就一个demo,点这个地址,先引进来,
import { Drawer } from 'antd-mobile';
// html
<Drawer
className='my-drawer'
style={{ minHeight: document.documentElement.clientHeight }}
contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
sidebarStyle={{ border: '1px solid #ddd' }}
sidebar={sidebar}
position='right'
docked={this.state.docked}
>
<div onClick={this.closeMask} className={!this.state.docked? '':'mask'}/>
</Drawer>
constructor(props) {
super(props)
this.state = {
docked: false,
};
}
// 抽屉效果
onDock = (d) => {
this.setState({
[d]: !this.state[d],
});
}
closeMask = ()=> {
// 关掉抽屉
this.setState({
docked: false
});
}
简单说下,定位在右边的,docked是在state里面定义的变量,用来控制抽屉的显示和隐藏,其实照着官网来说基本实现了,但是那个遮罩层没出来,要自己手动加样式,点击了也没收回抽屉,我想着在<Drawer>标签加点击事件,点击遮罩层控制变量就好,但是并没生效,于是我在抽屉标签下面加一个div,写一个遮罩层,并绑定事件完美解决,就是简单的遮罩层,
.mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.3);
z-index: 99;
}
就可以做成这样效果了,其他样式细节就不多说了,遇到同样问题的欢迎讨论