工具栏的水平滚动在移动设备上不起作用答案

【问题标题】：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;
}

【问题讨论】：

也许这可以帮助你：stackoverflow.com/questions/15732466/…

标签： android angular css ionic-framework ionic3

【解决方案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>

【讨论】：