angular - Ionic 3 使用按钮进行水平滚动而不显示滚动条

Question

如何实现离子滚动，当我们单击右箭头按钮时，它应该移动到离子 3 中离子内容的 div 中的下一个元素。我不希望 UI 中有任何 scollbar。它应该被隐藏起来。

我已经提到了这个链接。 如何在 ionic2 中使用 content.scrollTo() 进行离子滚动？

当我运行 scrollElement 在 ionic3 中没有被识别时，这对我没有帮助。它已被弃用。

请添加 StackBlitz 链接以获得答案。

我的代码结构看起来像

<ion-content>
<ion-row>
<ion-col>
<button ion-button>Left</button>
</ion-col>
<ion-scroll scrollX="true">
<div ngFor="let item of itemlist>
<button>{{item}}</button>
<div>
</ion-scroll>
</ion-col>
<ion-col>
<button ion-button>Right</button>
</ion-col>
</ion-row>
</ion-content>

Answer 1

首先你的代码是错误的，应该是这样的；

    <ion-content>    
      <ion-row>
         <ion-col>
           <button ion-button>Left</button>
         </ion-col>
         <ion-scroll scrollX="true">
           <div ngFor="let item of itemlist">
             <button ion-button>{{item}}</button>
           </div>
         </ion-scroll>
         <ion-col>
           <button ion-button>Right</button>
         </ion-col>
     </ion-row>
   </ion-content>

你看这个话题

Answer 2

首先，请检查此文件。

例如：

在 home.html 中

<ion-header>
  <ion-navbar>
    <ion-title>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div style="text-align: center;">
    <button ion-button (click)="scrollToBottom()">Scroll Bottom</button>

    <h1>Ionic 3 test</h1>
    <div *ngFor="let item of contentData">
      test content - {{item}}
    </div>
    <button ion-button (click)="scrollToTop()">Scroll Top</button>
  </div>
</ion-content>

在 home.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, Content } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Content) content: Content;

  public contentData = [];

  constructor(public navCtrl: NavController) {
    for(let i = 0; i < 301; i++) {
      this.contentData.push(i);
    }
  }

  scrollToTop() {
    this.content.scrollToTop();
  }
  scrollToBottom() {
    this.content.scrollToBottom();
  }


}

我们使用 for 循环创建了一个示例数据。在我们有 2 个按钮之后。请检查我的代码一个新的离子项目。在阅读您分享的资源后，您可以按照您想要的方式塑造它。