Vue большие списки с автопрокруткой

Question

Я хочу иметь журнал автопрокрутки на моей странице.Журнал получает динамический опрос от конечной точки REST.Проблема в том, что этот журнал может стать очень большим, поэтому я использовал vue-virtual-scroll-list для отображения журнала.Я также хочу, чтобы журнал автоматически прокручивался до конца, если только я не прокручивал вверх, и в этот момент я хочу сохранить положение прокрутки.Для этого я использовал vue-chat-scroll .Проблема сейчас в том, что прокрутка журнала вначале работает нормально, но после нескольких сотен записей полоса прокрутки полностью запуталась и перестала соответствовать содержимому, а также не прокручивалась до конца.Компонент Vue, который я написал, выглядит следующим образом:

<code>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 }}

\ \', методы: {fetchLogs: function () {var session = this.id;var start = -th.length;if (this.msgs.length> 0) start = this.msgs [this.msgs.length - 1] .id;var vue = this;$ .post (getUrl ("/ session /" + session + "/ log"), JSON.stringify ({start: start})). then (функция (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": вернуть "list-group-item-dark";case "Information": вернуть "list-group-item-info";case "Notice": вернуть "list-group-item-primary";case "Warning": вернуть "list-group-item-warning";case "Error": вернуть "list-group-item-danger";case "Critical": вернуть "list-group-item-danger";case "Fatal": вернуть "list-group-item-danger";}}}, смонтированный: function () {setInterval (function () {this.fetchLogs ();} .bind (this), this.refreshRate);}})

Есть ли способ это исправить?

Answer 1

Я думаю, что использование Vuescroll может решить вашу проблему.

• Прежде всего, Vuescroll имеет handle-resize событие, которое может помочь вам определить размеризменить содержание и реагировать на вас.
• Во-вторых, Vuescroll имеет scrollTo Api, который может помочь вам прокрутить в любое место страницы.
• Наконец, но как вырешить проблему слишком большого количества данных?Хорошо, вы можете вручную настроить массив ваших данных, прослушивая событие handle-scroll в соответствии с вашими потребностями.