angular - 如何在 ionic2 中使用 content.scrollTo() 进行 ionic 滚动？

Question

我尝试滚动到固定位置，例如 scrollTo(500, 20)。假设您使用的设备宽度为 300 像素。滚动目标现在超出了屏幕范围，您必须向右滚动。

我通过执行以下操作解决了这个问题:

<ion-content>
    <ion-scroll scrollX="true" style="width:100%; height:100%; white-space: nowrap; ">
        <div style="width:1000px; ">
            [box1] [box2] [box3] [...]
        </div>
    </ion-scroll>
</ion-content>

到这里一切都很好。例如，如果我想通过按下按钮向右跳转 500 像素，问题就开始了。滑动到正确的作品。我知道有一个函数可以为 <ion-content> 执行此操作:

@ViewChild(Content) content: Content;
[...]
this.content.scrollTo(500, 500, 500); 

不幸的是，这对我来说不起作用。我认为问题在于内容与设备大小有关，因此 scrollTo() 方法不会对 <ion-scoll> 产生影响。 .如何使用 <ion-scroll> 的 scrollTo() 方法而不是 <ion-content> ？

感谢您的帮助!

Answer 1

How can I use the scrollTo() method for <ion-scroll> instead of <ion-content>?

我仍在研究如何为滚动设置动画，但至少这可以被视为适合您的场景的解决方案。请看this plunker .

因为我们不能使用 ion-content对于滚动，我想获取 Scroll 的实例，然后访问内部 html 滚动元素，然后使用 element.scrollLeft在该元素上滚动的属性:

The element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled to the left.

所以在组件代码中:

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

@Component({...})
export class HomePage {
  @ViewChild('scroll') scroll: any;

    constructor() {}

    public backToStart(): void {
      this.scroll.scrollElement.scrollLeft = 0;
    }

    public scrollToRight(): void {
      this.scroll.scrollElement.scrollLeft = 500;
    }

}

在 View 中:

<ion-content padding>
  <ion-scroll #scroll scrollX="true" style="width:100%; height:150px; white-space: nowrap;">
        <div  style="width:1000px;">
            <div style="display:inline-block;height:100px;width:100px;border:1px solid black;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid red;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid blue;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid green;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid grey;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid brown;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid yellow;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid orange;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid pink;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid violet;"></div>
        </div>
    </ion-scroll>

    <button (click)="backToStart()" ion-button text-only>Go to start</button>
    <button (click)="scrollToRight()" ion-button text-only>Scroll to right!</button>
</ion-content>

通过做 this.scroll.scrollElement.scrollLeft = 500; ,我们可以将ion-scroll的内容向右滚动500px。然后我们可以通过执行 this.scroll.scrollElement.scrollLeft = 0; 再次回到开始。 .