ionic 横向滚动的菜单

Posted 2021-05-07 amanda-w

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}  //隐藏滚动条