react在移動端中使用antd-mobile的dreawer抽屜組件踩坑記錄

 

　　1. 如果在使用過程中報這個錯，意思是Drawer組件必須有一個子組件children，但現在還未定義

　　

 　　用官方例子解釋就是<Drawer>這里面必須要有內容，如下圖紅色框部分內容</Drawer>

　　 而這里面的內容一般為自定義代碼

　　

 

　　2. 如果你想讓彈出的側邊導航欄在頁面右側

　　

 　　不要在state中設置

　　

 　   而是要在<Drawer>中如下設置：position='right'

　　

 　 

　　3. 上面紅色框代碼是我自己寫的導航欄，有一個logo和一個點擊滑出側邊欄的圖標，現在要對一些樣式進行調整

　　去掉am-drawer-content類加的padding-top，設置為0

　　

 

 

　　接着去掉am-drawer-draghandle樣式的width樣式，設置寬度為0，讓右邊的導航條消失

　　

 

 

　　

　　現在要點擊該圖標側滑出導航欄

　　

　　這里一定要給<Drawer></Drawer>中自定義的代碼添加onOpenChange事件，

　　紅色框為自定義代碼，箭頭所指的部分是給上面截圖中的導航欄圖標添加點擊事件

　　

 　　最后在去掉am-drawer-sidebar的box-shadow陰影樣式就行了

　　

 

 

 

　　后記

　　原本到這里就完了，但我的本意是弄成自定義導航欄，如下圖

　　

 　　官方示例代碼如下

　　

 　　更改以后的代碼如下截圖，你也可以向下圖箭頭所指的注釋代碼那樣直接寫，但樣式需要重寫

　　

 

　　正當我覺得完全OK時，突然發現一個嚴重的問題，而我一直沒找到方法，導致最終棄用該組件

　　該問題為組件的遮罩在沒有點擊時，它的z-index比我的頁面內容還高，這就會導致給頁面某個元素

　　添加點擊事件，任你怎樣點都不會有反應，因為點擊的始終是你看不到的那層遮罩，而你真正要點擊的元素

　　在遮罩下面，無奈本人能力有限沒解決該問題，最后我自己用CSS3重新寫了一個側滑導航的效果

　   不經意間感嘆，偶然自己造輪子，其實也挺香的2333

　　注：react在PC端中使用antd組件中的dreawer組件暫未發現該問題

 

　　HTML

 　　　　　　　　　　　 <div className="nav-mask" id="mask" onClick={this.sideBarClose.bind(this)}></div>
                    <div id="sideNav" className="side-nav">
                        <ul className="side-nav-ul">
                            <li className="side-nav-li" onClick={this.sideBarClose.bind(this)}><Link to="/">首頁 </Link></li>
                            <li className="side-nav-li"><Link to="/user/lessonlist">課件</Link></li>
                            <li className="side-nav-li"><Link to="/user/download">下載</Link></li>
                            <li className="side-nav-li"><Link to="/scratch3.0/ide">去創作</Link></li>
                        </ul>
                    </div>

 　　JS

 //  打開側滑導航
    sideBarShow() {
        let sideNav = document.getElementById("sideNav");
        let mask = document.getElementById("mask");
        mask.style.display = 'block';
        sideNav.classList.remove("off-show");
        sideNav.classList.add("off-close");
    }

    //  關閉側滑導航
    sideBarClose() {
        let mask = document.getElementById("mask");
        let sideNav = document.getElementById("sideNav");
        mask.style.display = 'none';
        sideNav.classList.remove("off-close");
        sideNav.classList.add("off-show");
    }

 　　CSS

/* 側滑導航 */

.nav-mask {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 97;
  height: 100%;
  transition: .5s ease all;
  background-color: rgba(0, 0, 0, 0.45);
}

.side-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    /* 這里側滑導航的寬度不能用rem，否則到頁面寬度超過750后，無論橫豎屏頁面都無法鋪滿 */
    width: 200px;
    height: 100%;
    transform: translateX(300px);
    transition: .5s ease all;
    background-color: #fff;

}

.off-show {
    transform: translateX(300px);
    transition: .5s ease all;
}

.off-close{
    transform: translateX(0px);
    transition: .5s ease all;
}

.side-nav-ul {
    width: 100%;
    border-bottom: 1px solid #eee;
}

.side-nav-li {
    height: 0.6rem;
    line-height: 0.6rem;
    color: #282828;
    text-align: center;
    border-top: 1px solid #eee;
}

.side-nav-li a {
    display: block;
    color: #282828;
}