Ionic 3 горизонтальная прокрутка с помощью кнопки без отображения полосы прокрутки

Question

Как реализовать ионную прокрутку таким образом, чтобы при нажатии на кнопку со стрелкой вправо она переходила к следующему элементу в div по содержанию ионов в ionic 3. Мне не нужна полоса прокрутки в пользовательском интерфейсе. Это должно быть скрыто.

Я уже ссылался на эту ссылку. Как я могу использовать content.scrollTo () для ионной прокрутки в ionic2?

Это не помогает мне bcoz, когда я запускаю 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

Сначала изучите этот документ.

Например:

в 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 кнопки. Пожалуйста, проверьте мой код нового ионного проекта. Вы можете настроить его так, как хотите, прочитав источник, которым вы делитесь.

Answer 2

Во-первых, ваш код неверен, это должно быть так;

    <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>

Вы смотрите эту тему