1.首先要引入antd中的组件
import $ from 'jquery'
import React from 'react'
import {BrowserRouter,Router,Link,} from "react-router-dom"
import { List,Switch,Drawer,NavBar,Icon,WhiteSpace,Picker,DatePicker} from 'antd-mobile';
import { createForm } from 'rc-form';
import arrayTreeFilter from 'array-tree-filter';
import { district, provinceLite } from 'antd-mobile-demo-data';
2,为了方便定义的变量,如果有接口可以调取接口来获取数据
const Item = List.Item;
const componymodule=[[
{label:'10-20人',value:0},
{label:'20-30人',value:1},
{label:'30-50人',value:2},
{label:'50-70人',value:3},
{label:'70-100人',value:4},
{label:'100-120人',value:5},
{label:'120-160人',value:6},
]
]
3,在组件中定义抽屉中的内容,可以直接从接接口中获取
const sidebar1=(<div>
<div className='drawer_search' style={{width:'300px',height:'30px',lineHeight:'30px',border:'1px solid #999',}}>
<p className='icon iconfont icon-CRM-icofont-46' style={{float:'left',height:'27px',width:'35px',textAlign:'center',lineHeight:'30px'}}></p>
<input type="text" placeholder="搜索" style={{float:'left',height:'27px',width:'200px',lineHeight:'30px',border:'0'}}></input>
</div>
{['IT软件服务','IT硬件服务','手工业','服务业','餐饮业','哈哈哈哈','嘻嘻嘻嘻'].map((item,index)=>{
return(
<span style={{display:'block',lineHeight:'30px',width:"200px",textAlign:"center",fontSize:"14px",color:'#009ef9'}} onClick={this.handleClick1.bind(this, item)} key={index}>{item}</span>
)
})}
</div>
)
4,在render中写一个div来盛放内容
<div className="fristdrawer">
<div className='componyadd' arrow="horizontal" onClick={this.onOpenChange.bind(this)} style={{background:"#fff",height:'50px',position:'relative',marginBottom:'1px'}} >
<span style={{float:"left",marginLeft:'20px',fontSize:'14px',height:'50px',lineHeight:'50px'}}>联系人地址</span>
<span style={{float:"right",marginRight:'70px',fontSize:'14px',height:'50px',lineHeight:'50px'}}>{this.state.componyadd?this.state.componyadd:"请选择"}</span>
<i className='icon iconfont icon-CRM-icofont-43' style={{position:'absolute', right:'20px',top:'15px'}}></i>
</div>
<Drawer
className="my-drawer fristdrawer"
style={{ height: this.state.drawershow1 ?document.documentElement.clientHeight-60 : 0,minWidth:this.state.drawershow1 ? "200px" : 0}}
position='right'
open={this.state.drawershow1}
sidebar={sidebar}
>
</Drawer>
</div>
5,定义一个事件点击出现,
6,在state中定义抽屉伸出还是隐藏
7绑定点击事件
8,选中抽屉中的文字后抽屉隐藏切给赋值出现
9.将隐藏事件绑定在抽屉内容中的数据上
抽屉的样式