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

垂直滚动：

  .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结构：
     <div class="cate-view">
                <ul class="cate-navs">
                    <li v-for="(item,index) in types" :key="index">
                        {{ item.typename }}
                    </li>
                </ul>
       </div>

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;
       ......
  }