полоса прокрутки
Распространено в мобильных приложениях при прокрутке и нажатии для входа
описание проблемы
Когда мы разрабатываем веб-приложения, мы часто сталкиваемся с проблемой, то есть при переходе со страницы прокручиваемого списка на следующую страницу сведений, а затем при возврате на страницу списка трудно восстановить состояние полосы прокрутки и не может запомнить место, когда вы переехали.
Я пробовал много способов раньше:
- Есть scrollBehavior, который идет с vue-router, нужно запомнить scrollTop, а потом восстановить, но управление этим scrollTop кажется очень хлопотным, и иногда бывает непросто получить значение
- Существует также способ использования чистого CSS для размещения представления маршрутизатора на странице списка, а страница сведений использует позицию и z-индекс для покрытия страницы списка.После возврата исходная страница списка отображается напрямую.Это должно быть предварительно настроены для каждого уровня маршрутизации страниц, в противном случае отображение будет запутанным, и одна и та же страница будет отображаться под разными подмаршрутами, которые необходимо настраивать несколько раз.Например, сведения о продукте необходимо настроить во многих местах, вызывая избыточность.
Ни одно из вышеперечисленных решений не является идеальным
решение
Позже я разработал vue-page-stack с привязкой к keep-alive для сохранения стека страниц Vue, то есть виртуального дома во Vue, но проблема полос прокрутки до сих пор не решена. Поскольку виртуальный дом не записывает состояние прокрутки каждого компонента, его нельзя восстановить.
Когда я использовал cube-ui, я обнаружил, что полосу прокрутки можно восстановить с помощью контейнера прокрутки в этой библиотеке компонентов, что, как выяснилось позже, стало причиной лучшей прокрутки Хуан И.
Глядя на исходный код bs, выясняется, что внутренняя реализация bs не является нативной прокруткой, а записывает некоторую информацию о прокрутке, наиболее важными из которых являются x и y, являющиеся значениями прокрутки. при восстановлении виртуального дома информация прокрутки также восстанавливается.
В конце концов, vue-page-stack + bs отлично восстанавливает стек страниц
выпадающая загрузка
Эта проблема чаще встречается в таких запросах, как записи сообщений, а также в небольших программах.
описание проблемы
Большинство сценариев прокрутки — это подтягивающая загрузка. При подтягивающей загрузке загруженный контент отображается под областью прокрутки. После загрузки мы добавляем данные в список, а Vue отвечает за отрисовку только что загруженного контента. чтобы продолжить прокрутку.
Но в нашем сценарии при прокрутке записей сообщений в сеансе нужно потянуть вниз, чтобы загрузить больше сообщений, а после загрузки продолжать тянуть вниз и медленно прокручивать для просмотра. Это приводит к очень серьезной проблеме: содержимое, которое появляется после загрузки в раскрывающемся списке, находится над областью прокрутки. Если не выполнять обработку, оно сразу после загрузки перейдет к началу только что загруженного содержимого, потому что расстояние прокрутки не изменилось. изменено, что является проблемой, несовместимой с тем, чего мы хотим достичь.
решение
Также придумайте множество методов, в том числе вычисление общей длины нового сообщения, затем откат, но тип и высота сообщения несовместимы, вычисление будет иметь ошибку.
Окончательное решение, которое я придумал, было:
- После получения информации о загрузке через интерфейс сначала отметьте (с помощью отметки shouldScroll) первую часть информации, возвращаемую серверной частью, то есть новый контент, который наша перспектива увидит после загрузки.
- После обновления messageList Vue обновит данные и представление, и в это время обновится дом страницы.
- После того, как компонент MessageItem смонтирован, визуализация представления в это время завершена.Установив отметку (shouldScroll), родительский контейнер уведомляется о необходимости прокрутки до только что отмеченной позиции, которая является первой загруженной информацией, так что рендеринг и прокрутка могут быть достигнуты вместе
Вышеуказанные две проблемы отражены на рисунке ниже, и эффект в порядке, как показано ниже:
Выше моих приложений обмена мгновенными сообщениямиклиентВсе отражено в, добро пожаловать на просмотр исходного кода
Теперь развернуто в Интернете, добро пожаловать в опытклиентисторона управления