如何在页面加载时将页面滚动到底部？

Question

要求我想在页面加载时将内容滚动到页面底部。

这是我的HTML代码

WebElement ele = driver.findElement(By.xpath("element_xpath"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", ele);

页面的当前位置

我想要什么 - 页面图片

每当页面加载时自动滚动到底部。

Answer 1

最简单的方法是在scrollDownOnLoad上将ion-content属性设置为true。

<ion-content scrollDownOnLoad="true">

</ion-content>

查找官方文档here

Answer 2

尝试以下代码

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

}

Answer 3

使用#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>

现在使用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);
  }
}

Answer 4

我试图为此找到解决方案很长时间。所有这些解决方案都不够好，因为它从页面顶部开始并跳到最后。我希望它直接加载到最后。我只是找到答案here

"items": [
  {
    "name": "...",
    "unit_amount": {
      "value": 10,
      "currency_code": "USD"
    },
    "quantity": 1,
    "category": "DIGITAL_GOODS"
  }
]

这里是 ts 文件：

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items; let last = last">
      {{item}}
      {{last ? callFunction() : ''}}
    </ion-item>
  </ion-list>
</ion-content>

点击链接查看更多内容