如何在ionic2中使用content.scrollTo()进行离子滚动？

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>.如何使用scrollTo()方法<ion-scroll>代替<ion-content>？

谢谢你的帮助!

Answer 1

如何使用scrollTo()方法<ion-scroll>代替 <ion-content>？

我还在研究如何为滚动设置动画,但至少这可以被视为您的场景的解决方案.请看看这个plunker.

由于我们不能使用ion-content滚动,我虽然关于获取Scroll的实例,然后访问内部html滚动元素,然后使用element.scrollLeft属性滚动该元素:

element.scrollLeft属性获取或设置元素内容向左滚动的像素数.

所以在组件代码中:

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

}

在视图中:

<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;,我们可以将离子滚动500px的内容向右滚动.然后,我们可以再次回到起点this.scroll.scrollElement.scrollLeft = 0;.

Answer 2

通过内容滚动

@ViewChild(Content) content: Content;
  this.content.scrollTo 

通过id #scroll

@ViewChild('scroll') scroll: any;  
this.scroll.scrollElement.scrollLeft = 500;

上面的方法适用于顶部底部滚动,但在水平/ scrollX不工作的情况下,所以通过下面的代码我解决我的解决方案可能希望它会对你有所帮助.

打字稿

scrollmain(elementId, index) {
   console.info('elementId', elementId)
   var el = document.getElementById(elementId);
   el.scrollIntoView({ behavior: "smooth" });
}

HTML

<ion-scroll #scroll scrollX="true" style="width:100%;white-space: 
          nowrap; height: 60px">
    <ion-segment *ngIf="mcqdata" color="appmaincolor">
        <ion-segment-button *ngFor="let mcq of mcqdata; let i=index;" [id]="mcq.ques_id" value="{{mcq.ques_id}}" (ionSelect)="scrollmain(mcq.ques_id,i)"
            [ngClass]="{'active': selectedIdx == i}">
            <strong>Queastion{{i+1}}</strong>
        </ion-segment-button>
    </ion-segment>
</ion-scroll>