Vue реализует управление положением полосы прокрутки после рендеринга данных📜

Vue.js
Vue реализует управление положением полосы прокрутки после рендеринга данных📜

При столкновении с проблемой, которую трудно решить, корректировка вашего мышления и изменение мышления могут привести к неожиданным результатам.

предисловие

Сценарий спроса следующий: реализована отправка сообщений, если в контейнере слишком много сообщений, появится полоса прокрутки, самое последнее сообщение находится внизу и не может вовремя появиться в видимой области, позиция позиционируется на самое дно. Посмотрим на конечный эффект

Реализовать идеи

  • После рендеринга данных получите фактическую высоту контейнера сообщения через объект refs.
  • Установите полосу прокрутки в самый низ

Процесс реализации

sendMessage: function (event) {
    // 数据渲染
    this.senderMessageList.push(thisSenderMessageObj);
    // 改变滚动条位置
    this.$nextTick(function(){
        this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
        console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
        console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
    });
}

Побить пит-рекорд

  • Напрямую установить положение полосы прокрутки

    После завершения рендеринга данных непосредственно получается фактическая высота элемента, и задается положение полосы прокрутки.Вроде бы, в рассуждениях нет ничего плохого.В итоге высота полосы прокрутки не представлено, как ожидалось. Причина проблемы: после завершения рендеринга данных Vue не рендерил элемент DOM в это время, а заданная высота полосы прокрутки по-прежнему остается предыдущей высотой контейнера.

    sendMessage: function (event) {
    // 数据渲染
    this.senderMessageList.push(thisSenderMessageObj);
    // 改变滚动条位置
    this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
    console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
    console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
}

  • использоватьsetTimeout(), измените манипуляцию DOM на асинхронную (мое решение).
this.messagesContainerTimer = setTimeout(()=>{
    this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
    console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
    console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
    // 清理定时器
    clearTimeout(this.messagesContainerTimer);
},0);

  • Правильная реализация: используйтеnextTickвыполнить

    Благодаря ошибкам, на которые указали друзья в комментариях, Vue официально предоставляет готовые решения. Роль nextTick: когда данные обновляются и отображаются в dom, функция выполняется автоматически.

    this.$nextTick(function(){
    this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
    console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
    console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
});

напиши в конце

  • Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
  • Эта статья была впервые опубликована в Наггетс, если вам нужно перепечатать, пожалуйста, оставьте сообщение в области комментариев 💌
Категории