导航的布局：水平滚动，垂直滚动

垂直滚动：

  .main {
      position: absolute;
      background: #f00;
      left: 0;
      right: 0;
      top:.4rem;
      bottom:.4rem;
      overflow: hidden;

  }

  .list {
      height: 5.86rem;
      overflow-y: scroll;
      //回弹
      -webkit-overflow-scrolling: touch;  
  }

水平滚动：

   html结构：
     

                

                    

                        {{ item.typename }}
                    
                
       

css样式：

  .cate-view {
      position: absolute;
      top:0px;
      left: 0;
      right: 0;
      overflow: hidden;
  }

.cate-navs {
    white-space: nowrap;
    overflow-x: scroll;
}

  .cate-navs li {
      display: inline-block;
       ......
  }