Question

我有聊天应用，如果你使用Slack，你知道当你进入房间时，你会自动发现自己在聊天室的底部。所以我决定这样做，我有什么

Template.room.onCreated(function() {
  console.log($(document).height(),$(window).height());
  $('html, body').scrollTop($(document).height()-$(window).height());
});

输出437，437

但是当我在控制台中执行此操作时：

$('html, body').animate({ scrollTop: $(document).height()-$(window).height() + 64}, "fast");

它输出2000，437，这意味着我的消息未完全加载到我的模板中。（如果有人想要更多代码，请问。）

知道如何建立这个吗？

编辑：

template.html的这一部分

<div class="messages-wrap"> 
                <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12"> 

                    {{#if haseMoreMessages}}
                        <div class="loadmore text-center" id="incLimit">Load More</div>
                    {{/if}}
                    {{#if Template.subscriptionsReady }}
                        {{#each messages}}
                            {{> message}}
                        {{/each}}
                    {{/if}}
                    </div>
                </div>
                </div>
            </div>

和template.js（部分）

Template.room.onRendered(function() {
  Session.setDefault('messageLimit', 200);
});

    Template.room.onCreated(function() {
      var self = this;
      self.autorun(function() {
    if (self.subscriptionsReady()) {
          Tracker.afterFlush(function () {
            $('html, body').scrollTop($(document).height() - $(window).height());
          });
        }
      });

    });

    Template.room.events({
      'click #incLimit' : function(e,template){
        Session.set('messageLimit',Session.get('messageLimit') + 100);
      }
    });
    Template.room.helpers({
      messages: function(){
          return Messages.find({},{sort:{createdAt:1}});
      },
       haseMoreMessages:function(){
        if (Session.get('messageLimit') > Messages.find().count()) return false;
        return true;
       },
    });

Answer 1

这是Blaze非常令人沮丧的一个方面。试试这个，但是：

Template.room.onRendered(function () {
  var template = this;

  this.autorun(function () {
    if (template.subscriptionsReady()) {
      Tracker.afterFlush(function () {
        $('html, body').scrollTop($(document).height() - $(window).height());
      });
    }
  });
});

等待所有模板订阅首先准备就绪，然后等待任何计算完全完成（Tracker.afterFlush），然后然后执行滚动。如果您的模板在评估和呈现之前具有依赖于其他内容的Tracker.afterFlush块，则通常需要{{#if}}。

更新：

如果您没有看到所有代码，并且知道为何或何时想要滚动到顶部，那么很难说出您的目标是什么。但是请参阅下面的Meteorpad链接，了解您尝试对消息限制执行的工作版本（由于有3条消息，我只会将限制增加1）。

Meteorpad Link

您应该注意以下几点：

设置默认变量并订阅Template.x.onCreated中的内容，而不是Template.x.onRendered。
您忘记了实际订阅了您的收藏。
在Meteor.publish回调中限制服务器端的邮件。

Answer 2

通过跟踪 模板助手的不同方法：

我利用了模板帮助器，因为它已经反应性地跟踪所有更改（和新的）消息。因此，您可以放置向下滚动命令。

Template.room.helpers({
  messages: function(){
      //put your scroll-up command here
      //as this helper is keeping track on changes already
      $('html, body').scrollTop($(document).height() - $(window).height());
      return Messages.find({},{sort:{createdAt:1}});
  },
   haseMoreMessages:function(){
    if (Session.get('messageLimit') > Messages.find().count()) return false;
    return true;
   },
});

因此，您可以保存资源以让其他跟踪器观察集合（您将双跟踪相同的集合）。

当页面加载向下滚动时（不是那么简单）：Meteor JS

2 个答案: