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

Posted

技术标签:

【中文标题】如何在 ionic2 中使用 content.scrollTo() 进行离子滚动?【英文标题】:How can I use content.scrollTo() for ion-scroll in ionic2? 【发布时间】:2017-10-21 08:09:27 【问题描述】:

我尝试滚动到一个固定位置,例如 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 像素,问题就开始了。滑动到正确的作品。我知道&lt;ion-content&gt; 有一个函数可以做到这一点:

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

不幸的是,这在我的情况下不起作用。我认为问题在于内容与设备大小有关,因此 scrollTo() 方法对&lt;ion-scoll&gt; 无效。如何使用 &lt;ion-scroll&gt; 而不是 &lt;ion-content&gt; 的 scrollTo() 方法?

感谢您的帮助!

【问题讨论】:

不确定这是否是原因.. 但ion-scroll 通常需要特定尺寸.. % 通常不起作用 就我而言,它运行良好。我可以向右滚动,并且有一个滚动条显示可滚动区域可能是 1000 像素宽。我的问题是 ion-content 适合屏幕尺寸,而 ion-scroll 对 content.scrollTo() 没有反应,因为 content 的宽度为 300 像素,而 ion-scroll 的宽度为 1000px。 【参考方案1】:

为什么不获取要首先滚动到的元素的尺寸?在 html 文件中为您的 ion-scroll 分配一个 id,然后您可以use this function:

scrollToElement(id)  
    var el = document.getElementById(id);
    var rect = el.getBoundingClientRect();
    // scrollLeft as 0px, scrollTop as "topBound"px, move in 800 milliseconds
    this.content.scrollTo(0, rect.top, 800);

来自this documentation: getBoundingClientRect left、top、right、bottom、x、y、width、height 属性的返回值,以像素为单位描述边框框。宽度和高度以外的属性都相对于视口的左上角。

查看您的代码,我认为您不需要离子滚动,您应该能够为您的 div 分配一个 id 并获得您想要的结果。

【讨论】:

嗨。谢谢你的回答。我的问题不是基于找到我想要滚动到的元素的正确位置。我可以写 this.content.scrollTo(500, 0, 800);直接但没有任何反应。我的问题是离子内容适合屏幕尺寸,离子滚动不响应 content.scrollTo(),因为内容的宽度为 300 像素,离子滚动的宽度为 1000 像素。如果我删除 ion-scroll,我无法向右滚动。我尝试了很多内容滚动。但不幸的是,一切都没有奏效:( 你知道为什么去掉离子卷轴就不行了吗?在这种情况下你可以手动滚动吗? 不,我不能。我找到的每个解决方案都使用离子滚动。 ion-content 的主要问题是我无法向右滚动。我认为 ion-content 不是为此而生的。【参考方案2】:

我如何使用 &lt;ion-scroll&gt; 的 scrollTo() 方法而不是 &lt;ion-content&gt;?

我仍在研究如何为滚动设置动画,但至少这可以被视为您的方案的解决方案。请看this 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;我们可以将 ion-scroll 的内容向右滚动 500px。然后我们可以通过this.scroll.scrollElement.scrollLeft = 0; 重新开始。

【讨论】:

非常好的答案,谢谢!不幸的是,我收到一条错误消息:“无法设置未定义的属性 'scrollLeft'”。如果我写 console.log(this.scroll) 我得到这个:_scrollContent:ElementRef,nativeElement:div.scroll-content。您对此有解决方案吗? 嗯,也许我们正在使用不同版本的 Ionic。而不是this.scroll.scrollElement.scrollLeft = 500; 尝试this.scroll. nativeElement.scrollLeft = 500; 我发现了,就是this.scroll._scrollContent.nativeElement.scrollLeft!非常感谢!! 很高兴听到这个消息! :) 很好的答案!我创建了一个平滑滚动的动画,而不使用任何 js 库gist.github.com/sgotre/e070ef5cce1c778a6380d4c139047e13【参考方案3】:

通过内容滚动

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

按 id #scroll

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

上述方法适用于上下滚动,但在水平/scrollX 不起作用的情况下,通过下面的代码我解决了我的解决方案,希望它对您有所帮助。

TypeScript

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>Queastioni+1</strong>
        </ion-segment-button>
    </ion-segment>
</ion-scroll>

【讨论】:

【参考方案4】:

要添加到上面的答案,这将处理平滑滚动。

在 .html 中命名滚动元素

<ion-scroll #scroll>

导入卷轴。

import  Scroll  from 'ionic-angular';

引用 .ts 中的滚动条

@ViewChild('scroll') scroll: any;

在需要的地方添加此代码:

this.scroll._scrollContent.nativeElement.scrollTo( left: 0, top: 0, behavior: 'smooth' );

希望对某人有所帮助。

【讨论】:

【参考方案5】:

您可以将this.content.scrollTo(...) 替换为this.content._scrollContent.nativeElement.scrollTo(...)

【讨论】:

以上是关于如何在 ionic2 中使用 content.scrollTo() 进行离子滚动?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Ionic2 的警报中更改按钮的颜色

ionic2中如何使用自动生成器

ionic2中如何使用自动生成器

在ionic2中上传之前如何获取文件名和mime类型?

我们如何在 ionic2/Angular2 中集成或使用 AWS API 网关 SDK

Ionic2,Angular2:如何在使用 http get 进行 REST API 服务调用时避免 CORS 问题?