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} //隐藏滚动条
原文地址:https://www.cnblogs.com/Amanda-w/p/11647899.html
时间: 2024-10-08 04:14:13