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

【问题标题】：Ionic 3 horizontal scrolling using button without showing scrollbarIonic 3 使用按钮进行水平滚动而不显示滚动条
【发布时间】：2019-02-02 16:28:51
【问题描述】：

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

我已经提到了这个链接。 How can I use content.scrollTo() for ion-scroll in ionic2?

这对我没有帮助，因为当我运行 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>

【问题讨论】：

标签： angular ionic3 ion-scroll

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

你看起来this topic

【讨论】：

我无法让它工作。请帮我提供一个 ionic3 中的工作示例
Okey 等待我的新答案。

【解决方案2】：

首先，请检查this 文档。

例如：

在 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 个按钮之后。请检查我的代码一个新的离子项目。阅读您分享的资源后，您可以按照自己的方式塑造它。

【讨论】：