Question

我想在我的页面上有一个自动滚动日志。日志从REST端点动态轮询。现在的问题是这个日志会变得非常大，所以我使用vue-virtual-scroll-list来显示日志。我还希望日志自动滚动到底部，除非我向上滚动，此时我想保持滚动位置。为此，我使用了vue-chat-scroll。现在的问题是日志滚动在开始时工作正常，但在几百个条目之后，滚动条完全混乱并且不再匹配内容，也不会自动滚动到底部。我写的vue组件看起来像这样：

Vue.component('log', {
  data: function() {
    return { msgs: [] }
  },

  props: {
    id: { type: String, required: true },
    length: { type: Number, required: true },
    refreshRate: { type: Number, default: 1000 }
  },

  template: 
      '<virtual-list :size="40" :remain="length" class="list-unstyled" :ref="id" v-chat-scroll="{always: false}">\
        <li v-for="msg in msgs" :key="msg.id" :class="logColor(msg.severity)">\
          <pre>[{{ shortTimestamp(msg.timestamp) }}]: {{ msg.message }}</pre>\
        </li>\
      </virtual-list>',

  methods: {
    fetchLogs: function(){
      var session = this.id;
      var start = -this.length;
      if (this.msgs.length > 0)
        start = this.msgs[this.msgs.length - 1].id;

      var vue = this;
      $.post(getUrl("/sessions/" + session + "/log"), JSON.stringify({
        start: start
      })).then(function(data) {
        for(var msg of data){
          vue.msgs.push(msg);
        }
      });
    },

    shortTimestamp: function(time) {
      var fulldate = new Date(time);
      return fulldate.toLocaleTimeString();
    },

    logColor: function(severity) {
      switch (severity) {
        case "Trace":
          return "list-group-item-light";
        case "Debug":
          return "list-group-item-dark";
        case "Information":
          return "list-group-item-info";
        case "Notice":
          return "list-group-item-primary";
        case "Warning":
          return "list-group-item-warning";
        case "Error":
          return "list-group-item-danger";
        case "Critical":
          return "list-group-item-danger";
        case "Fatal":
          return "list-group-item-danger";
      }
    }
  },

  mounted: function() {
    setInterval(function () {
      this.fetchLogs();
    }.bind(this), this.refreshRate); 
  }
})

有什么方法可以解决这个问题吗？

Answer 1

我认为使用Vuescroll可以解决您的问题。

首先，Vuescroll有handle-resize个事件可以帮助您检测内容的大小变化并对您做出反应。
其次，Vuescroll有scrollTo Api可以帮助您滚动到页面的任何位置。
最后，但是你如何解决数据过多的问题？好的，您可以根据自己的需要通过监听handle-scroll事件来手动定制数据数组。

vue使用autoscroll的大型列表

1 个答案: