ionic 横向滚动的菜单

主宰稳场 提交于 2019-12-01 02:25:41

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!