不用輪子本身寫滑動塊

咱們要作的時移動端的滑動塊組件，像這樣

http://www.jq22.com/jquery-info16045

tab組件通常是一行顯示的，若是數量太多怎麼辦

咱們能夠把多餘的tab項隱藏，左右滑動查看

可滾動的水平導航
div.scroll{
display: flex;align-items:center;
justify-content:flex-start;
overflow-x: scroll; white-space: nowrap;
}

隱藏滾動條
div.scroll::-webkit-scrollbar{width:0;height:0}

滑塊組件也能夠做爲圖文組件

如

<div class="scroll2">
              <div class="jptj">
                <div>1元</div>
                <div>10模塊</div>
                <div>1元</div>
                <div>10模塊</div>
                <div>1元</div>
                <div>10模塊</div>

              </div>
            </div>

.jptj {
    display: flex;
    flex-flow: nowrap;

}
.jptj>div {
    margin:10px;
    width:165px;
    height:80px;
    background-color: #eee;
    padding:0 auto;
}
div.scroll2{
  display: flex;align-items:center;
  justify-content:flex-start;
  overflow-x: scroll; white-space: nowrap;
}