草庐IT

javascript - ionic 2 + Angular 2 : auto scroll to bottom of list/page/chat

coder 2024-05-10 原文

我正在尝试编写包含“聊天”和“内容”两个部分的页面。我希望那个“聊天”将页面自动滚动到底部而没有任何效果。聊天是<ion-list>有几个<ion-item> .

<ion-list>
<ion-item> item 1 </ion-item>
<ion-item> item 2 </ion-item>
....
<ion-item> item 20 </ion-item>
<ion-item> item 21 </ion-item> <!-- user should see directly this item on bottom of the page -->
</ion-list>

我使用的是 Javascript，而不是 typescript，而且我不想不使用 jQuery。 谢谢 :) 另外，当我转到“内容”部分并返回“聊天”时，我想再次自动滚动聊天。

最佳答案

这是我的做法:

chatPage.html

<ion-content #content padding class="chatPage">

  <ion-list no-lines>
    <ion-item *ngFor="let msg of messages" >
      <chat-bubble [message]="msg"></chat-bubble>
    </ion-item>
  </ion-list>

</ion-content>

chatPage.html 中重要的一点是 #content在 <ion-content> .我将使用 #content标识符以获取对 <ion-content> 的引用在我的 chatPage.js 中使用 ViewChild .

现在是实际的滚动逻辑:

chatPage.js

import {Component, ViewChild} from '@angular/core';

@Component({
  templateUrl: 'build/pages/chatPage/chatPage.html',
  queries: {
    content: new ViewChild('content')
  }
})
export class ChatPage {
  constructor() { 

  }

  //scrolls to bottom whenever the page has loaded
  ionViewDidEnter(){
    this.content.scrollToBottom(300);//300ms animation speed
  }
}

此外，每当我的 chatPage 需要在列表中显示另一条聊天消息(收到新消息或发送新消息)时，我使用以下代码滚动到新底部:

setTimeout(() => {
  this.content.scrollToBottom(300);//300ms animation speed
});

Typescript 更新

当我给出这个答案时，我正在使用 Ionic 2 项目的 JavaScript 版本。随着时间的推移，我切换到 TypeScript，但我忘记更新答案，因此，这里有一个针对 chatPage.js(ts) 的小更新:

chatPage.ts

import {Component, ViewChild} from '@angular/core';

@Component({
  templateUrl: 'chatPage.html'
})
export class ChatPage {
  @ViewChild('content') content:any;

  constructor() { }

  //scrolls to bottom whenever the page has loaded
  ionViewDidEnter(){
    this.content.scrollToBottom(300);//300ms animation speed
  }
}

关于javascript - ionic 2 + Angular 2 : auto scroll to bottom of list/page/chat，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37415085/

javascriptAngularcodestrongcontentchationic2autoscroll

有关javascript - ionic 2 + Angular 2 : auto scroll to bottom of list/page/chat的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby - caches_page :all - 2

    有什么方法可以告诉Rails3在给定的Controller中缓存所有页面，而不必在调用caches_page时列出所有页面？我尝试了caches_page:all，但它不起作用。 最佳答案 有点像实现的错误，但我刚刚尝试过它并且它适用于Rails3.0.6:caches_page:except=>[] 关于ruby-caches_page:all，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/que

  3. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  4. ruby-on-rails - Ruby on Rails : if current page? 是主页，不显示表单 - 2

    我不想显示表单，但前提是当前页面不是主页这是我目前所拥有的...我有我的路线设置:root'projects#index'我的看法:'projects',:action=>'index'))%>showsomestuff如果url是localhost:3000/projects，则不会显示但是它显示了它的localhost:3000所以我需要以某种方式确保它不会显示主页。另外，我有主页的搜索参数，但我仍然不想显示它是否像localhost:3000/projects?search=blahblahblah 最佳答案 使用root_p

  5. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  6. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  7. ruby-on-rails - rails expire_page 没有删除缓存的文件 - 2

    我有一个具有页面缓存的ControllerAction，我制作了一个清扫程序，它使用Controller和指定的Action调用expire_page...Controller操作呈现一个js.erb模板，所以我试图确保expire_page删除public/javascripts中的.js文件，但它没有这样做。classJavascriptsController"javascripts",:action=>"lol",:format=>'js')endend...所以，我访问javascripts/lol.js并呈现我的模板。我验证了public/javascripts/lol.js

  8. ruby-on-rails - Rails with angular 与 Rails pure(查看性能) - 2

    我尝试在Internet上搜索有关使用angularJS进入RubyonRails项目与RubyonRailspure的View性能的信息。我的问题是因为2个月前我开始使用纯AngularJS，现在我需要将AngularJS集成到一个新项目中，但需要展示使用带有RubyonRails的AngularJS呈现View的性能如何，并消除对RubyonRails的负担.例如:带Rails的Angular:使用RubyonRails获取数据(从数据库或GET请求)，将信息发送到file.js.erb并使用AngularJS操作数据并显示带有解析数据的View。纯粹的Rails:(自然流程)使用

  9. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  10. ruby-on-rails - 将 Angular JS 与 Rails 集成 - 2

    我需要一些指导来了解如何将Angular整合到rails中。选择Rails的原因:我喜欢他们偏执的做事方式。还有迁移，gem真的很酷。使用angular的原因:我正在研究和寻找最适合SPA的框架。Backbone似乎太抽象了。我不得不在Angular和Ember之间做出选择。我首先开始阅读Angular，它对我来说很有意义。所以我从来没有去读过关于ember的文章。使用Angular和Rails的原因:我研究并尝试使用小型框架，例如grape、slim(是的，我也使用php)。但我觉得需要坚持项目的长期范围。我个人喜欢用Rails的方式做事。这就是我需要帮助的地方，我在Rails4中有

随机推荐