工具栏的水平滚动在移动设备上不起作用
Posted
技术标签:
【中文标题】工具栏的水平滚动在移动设备上不起作用【英文标题】:Horizontal scroll of toolbar is not working on Mobile 【发布时间】:2019-06-27 22:08:53 【问题描述】:我正在构建一个离子应用程序,在该应用程序的标题中添加了工具栏,它有 5 个按钮可以导航。 但是当我在浏览器设备上尝试代码时,工具栏的水平滚动效果很好,但在实际设备中,它不能正常工作。有时它会滚动,有时它不会。 下面是相同的代码。
<ion-header>
<ion-navbar color="light">
<ion-title>Home</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
<button ion-button icon-only>
<ion-icon name="cart"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-toolbar color="light">
<ion-buttons>
<button ion-button clear>'All'|translate</button>
</ion-buttons>
<ion-buttons *ngFor="let facet of parentCategories">
<button ion-button [ngClass]=" 'active' : selectedFacet == facet">facet
</button>
<button ion-button icon-only clear class="accordion" (tap)="getSubFacets(facet);accordion(event)" *ngIf="selectedFacet == facet"><ion-icon name="ios-arrow-down"></ion-icon></button>
</ion-buttons>
<div id="sub-category" class="sub-category">
<ion-buttons *ngFor="let subFacet of childCategories">
<button ion-button [ngClass]=" 'active' : selectedSubFacet == subFacet" (tap)="getFilteredProducts('categoryFacet',subFacetMap.get(subFacet), selectedFacet, subFacet)">
subFacet</button>
</ion-buttons>
</div>
</ion-toolbar>
</ion-header>
css:
.toolbar-content
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
width: 100%;
height: 56px;
【问题讨论】:
也许这可以帮助你:***.com/questions/15732466/… 【参考方案1】:我遇到了同样的问题,我按照这个示例进行操作
CSS:
ion-toolbar.scrollable-segments
ion-segment
display: block;
overflow-x: scroll;
white-space: nowrap;
ion-segment-button.segment-button
display: inline-block;
width: auto;
html:
<ion-toolbar no-border class="scrollable-segments">
<ion-segment [(ngModel)]="segment">
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="test">
Recent
</ion-segment-button>
<ion-segment-button value="test2">
Recent
</ion-segment-button>
<ion-segment-button value="test3">
Recent
</ion-segment-button>
<ion-segment-button value="test4">
Recent
</ion-segment-button>
<ion-segment-button value="test5">
Recent
</ion-segment-button>
<ion-segment-button value="test6">
Recent
</ion-segment-button>
<ion-segment-button value="test7">
Recent
</ion-segment-button>
</ion-segment>
</ion-toolbar>
参考: https://forum.ionicframework.com/t/horizontally-scrolling-sub-header-in-ionic-2/42722/8
【讨论】:
你真的可以让它显示更少的项目,例如。尺寸离子段按钮宽度=20vw ?我在段按钮中出现椭圆 离子段是否会越过屏幕的右边缘并允许您滚动以查看更多段按钮?如何?您能否在 stackblitz.com 上展示一个工作示例?谢谢。【参考方案2】:试试这个,它的工作代码,尝试和测试
HTML:
<ion-toolbar color="light">
<div style="overflow-x: scroll;width: 100%">
<ion-row nowrap>
<ion-buttons>
<button ion-button clear>All</button>
</ion-buttons>
<ion-buttons *ngFor="let facet of countries">
<button ion-button>
facet.item
</button>
<button ion-button icon-only clear class="accordion" (tap)="getSubFacets(facet);accordion(event)" *ngIf="selectedFacet == facet">
<ion-icon name="ios-arrow-down"></ion-icon>
</button>
</ion-buttons>
</ion-row>
</div>
</ion-toolbar>
【讨论】:
以上是关于工具栏的水平滚动在移动设备上不起作用的主要内容,如果未能解决你的问题,请参考以下文章