如何在 ionic2 中使用 content.scrollTo() 进行离子滚动? [英] How can I use content.scrollTo() for ion-scroll in ionic2?
问题描述
我尝试滚动到固定位置,例如 scrollTo(500, 20).假设您在一个宽度为 300 像素的设备上.滚动目标现在超出了屏幕范围,您必须向右滚动.
我通过执行以下操作解决了这个问题:
<ion-scroll scrollX="true" style="width:100%; height:100%; white-space: nowrap; "><div style="width:1000px; ">[框1] [框2] [框3] [...]
</ion-scroll></离子含量>
到这里一切都很好.例如,如果我想通过按下按钮向右跳 500 像素,问题就开始了.滑动到正确的作品.我知道有一个函数可以为 <ion-content>
:
@ViewChild(Content) 内容:内容;[...]this.content.scrollTo(500, 500, 500);
不幸的是,这在我的情况下不起作用.我认为问题在于内容与设备大小有关,因此 scrollTo() 方法对
不起作用.如何使用
而不是
的 scrollTo() 方法?
感谢您的帮助!
如何为
<ion-scroll>
使用 scrollTo() 方法而不是?
我仍在研究如何为滚动设置动画,但至少这可以被视为您的方案的解决方案.请看看这个plunker.
由于我们不能使用ion-content
进行滚动,我想先获取Scroll的实例,然后访问内部的html滚动元素,然后使用element.scrollLeft 用于在该元素上滚动的属性:
element.scrollLeft 属性获取或设置像素的数量元素的内容向左滚动.
所以在组件代码中:
import { Component, ViewChild } from '@angular/core';从 'ionic-angular' 导入 { NavController, Content };@零件({...})导出类主页{@ViewChild('scroll') 滚动:任意;构造函数(){}公共 backToStart(): 无效 {this.scroll.scrollElement.scrollLeft = 0;}公共scrollToRight():无效{this.scroll.scrollElement.scrollLeft = 500;}}
在视图中:
<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 纯黑色;"></div><div style="display:inline-block;height:100px;width:100px;border:1px 纯红色;"></div><div style="display:inline-block;height:100px;width:100px;border:1px 纯蓝色;"></div><div style="display:inline-block;height:100px;width:100px;border:1px 纯绿色;"></div><div style="display:inline-block;height:100px;width:100px;border:1px 纯灰色;"></div><div style="display:inline-block;height:100px;width:100px;border:1px 纯棕色;"></div><div style="display:inline-block;height:100px;width:100px;border:1px 纯黄色;"></div><div style="display:inline-block;height:100px;width:100px;border:1px 纯橙色;"></div><div style="display:inline-block;height:100px;width:100px;border:1px 纯粉色;"></div><div style="display:inline-block;height:100px;width:100px;border:1px 纯紫色;"></div>
</ion-scroll><button (click)="backToStart()" ion-button text-only>转到开始</button><button (click)="scrollToRight()" ion-button text-only>向右滚动!</button></离子含量>
通过执行this.scroll.scrollElement.scrollLeft = 500;
,我们可以将ion-scroll的内容向右滚动500px.然后我们可以通过执行 this.scroll.scrollElement.scrollLeft = 0;
.
I try to scroll to a fixed position, for example scrollTo(500, 20). Let's say that you are on a device, which has got a width of 300 pixel. The scroll target is now out of the screen scope, you have to scroll to the right.
I solved this by doing the following:
<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>
Up to here everything is fine. The problem starts if i want to jump 500 pixel to the right by pressing a button for example. Swiping to the right works. I know that there is a function to do this for <ion-content>
:
@ViewChild(Content) content: Content;
[...]
this.content.scrollTo(500, 500, 500);
This unfortunately doesn't work in my case. I think the problem is that the content is related to the device size so the scrollTo() method does not take affect for <ion-scoll>
. How can I use the scrollTo() method for <ion-scroll>
instead of <ion-content>
?
Thanks for any help!
How can I use the scrollTo() method for
<ion-scroll>
instead of<ion-content>
?
I'm still working on how to animate the scroll, but at least this may be considered as a solution for your scenario. Please take a look at this plunker.
Since we can't use theion-content
for scrolling, I though about getting the instance of the Scroll, then accessing the inner html scroll element, and then using the element.scrollLeft property to scroll on that element:
The element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled to the left.
So in the component code:
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;
}
}
And in the 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>
By doing this.scroll.scrollElement.scrollLeft = 500;
, we can scroll the content of the ion-scroll 500px to the right. We can then go back to the start again by doing this.scroll.scrollElement.scrollLeft = 0;
.
这篇关于如何在 ionic2 中使用 content.scrollTo() 进行离子滚动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!