ionic 橫向滾動的菜單

1.1. 橫向滾動的菜單

1.1.1. 功能介紹

不運用<ion-scroll>，直接用css樣式，做成菜單欄的橫向滾動。

最外層div設置display:-webkit-box;overflow-x:scroll

1.1.2. 代碼

<div class="bar has-header" style="height: 44px;color: #000000;padding:0">

<div class="menu-box">

<div ng-repeat="x in titleList">

<div class="menu-item" ng-bind="x" ng-click="changeRecord($index)" ng-class="isActive == $index?'activeBot':''">

</div>

</div>

</div>

</div>

 

.menu-box{

margin:0 10px;

display: -webkit-box;   // flex-direction:row

overflow-x: scroll;

-webkit-overflow-scrolling: touch;  //模擬移動端滾動效果

}

.menu-item{

width: auto;

line-height: 44px;

text-align: center;

padding-left: 5px;

padding-right: 5px;

}

::-webkit-scrollbar {display:none}  //隱藏滾動條