ionic-framework - Ionic 3 Horizo​​ntal Scroll X 不工作

Question

我尝试添加 Ionic Horizontal Scroll X，但这对我不起作用。请查看我的代码，有人知道为什么这不起作用吗？我尝试添加<ion-scroll scrollX="true">不起作用。请帮我解决我的问题

谢谢

 <ion-scroll scrollX="true" style="height: 100px; width: 450px;">
        <ion-item >


          <ion-avatar *ngFor="let staff of master.staffList" item-start >
            <img src="{{master.masterStaffs.get(staff.id)['IMAGE']}}">
            <p class="addnew-user">{{master.masterStaffs.get(staff.id)['NAME']}}</p>
          </ion-avatar>

          <ion-avatar *ngIf="master.getRoleID() == master.adminRoleID" item-start (click)="addnewTeacher()">
            <img src="{{master.addNewTeacherImage}}">
            <p class="addnew-user-main">Add New</p>
          </ion-avatar>

        </ion-item>
      </ion-scroll>

标签： ionic-frameworkionic3angular5

Answer 1

将离子项的样式设置为style="overflow-x: auto;"

     <ion-scroll scrollX="true" style="height: 100px;">
        <ion-item style="overflow-x: auto;">

          <ion-avatar *ngFor="let staff of master.staffList" item-start >
            <img src="{{master.masterStaffs.get(staff.id)['IMAGE']}}">
            <p class="addnew-user">{{master.masterStaffs.get(staff.id)['NAME']}}</p>
          </ion-avatar>

          <ion-avatar *ngIf="master.getRoleID() == master.adminRoleID" item-start (click)="addnewTeacher()">
            <img src="{{master.addNewTeacherImage}}">
            <p class="addnew-user-main">Add New</p>
          </ion-avatar>

        </ion-item>
      </ion-scroll>