[英]how to scroll the page to bottom whenever the page load?
Requirement- I want to scroll the content to the bottom of the page whenever the page load. 要求-每当页面加载时,我都希望将内容滚动到页面底部。
Here is my html code 这是我的HTML代码
<ion-content style="background-color: #f5f8fa;">
<p style="line-height:24px;padding-left:10px;margin-top:20px;text-transform:capitalize;font-size:16px;">{{this.TASKDESC}}</p>
<ion-list *ngFor="let list of list; let i = index;" style="margin:0;height:auto;padding-top:5px;padding-left:17px;z-index:-1">
<ion-item text-wrap class="item" style=" margin-top:-25px;padding:0; background-color:#f5f8fa;z-index:-1;">
<div [style.margin]="list.TAG_FROM === loggedinuser ? '0px 0px 0px -12px':'0px -12px 0px 0px'" [style.float]="list.TAG_FROM === loggedinuser ? 'right':'left'" style="width:33px;height:33px;background-color:#818993;overflow:hidden;color:#fff;z-index:9.9999999;border-radius:50%;font-size:14px;text-align:center;padding-top:7px;" >{{list.TAG_FROM.substring(0,2)}}</div>
</div>
</ion-item>
</ion-list>
</ion-content>
Current position of the page 页面的当前位置
What i want- The image of the page 我想要的-页面图像
Scroll to bottom automatically whenever the page load. 页面加载时自动滚动到底部。
try this below code 试试下面的代码
import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
...
export class ScrollToBottom {
@ViewChild(Content) content: Content;
constructor(){}
ionViewDidLoad()
{
setTimeout(() => {
this.content.scrollToBottom(300);
}, 1000);
}
}
use the #content
identifier to obtain a reference to <ion-content>
using the ViewChild. 使用
#content
标识符使用ViewChild获得对<ion-content>
的引用。
<ion-content #content style="background-color: #f5f8fa;">
<p style="line-height:24px;padding-left:10px;margin-top:20px;text-transform:capitalize;font-size:16px;">{{this.TASKDESC}}</p>
<ion-list *ngFor="let list of list; let i = index;" style="margin:0;height:auto;padding-top:5px;padding-left:17px;z-index:-1">
<ion-item text-wrap class="item" style=" margin-top:-25px;padding:0; background-color:#f5f8fa;z-index:-1;">
<div [style.margin]="list.TAG_FROM === loggedinuser ? '0px 0px 0px -12px':'0px -12px 0px 0px'" [style.float]="list.TAG_FROM === loggedinuser ? 'right':'left'" style="width:33px;height:33px;background-color:#818993;overflow:hidden;color:#fff;z-index:9.9999999;border-radius:50%;font-size:14px;text-align:center;padding-top:7px;" >{{list.TAG_FROM.substring(0,2)}}</div>
</div>
</ion-item>
</ion-list>
</ion-content>
Now use the this.content.scrollToBottom
to scroll bottom. 现在,使用
this.content.scrollToBottom
滚动底部。
import {Component, ViewChild} from '@angular/core';
@Component({
templateUrl: 'chatPage.html'
})
export class ChatPage {
@ViewChild('content') content:any;
constructor() { }
ionViewDidEnter(){
this.content.scrollToBottom(300);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.