Самая простая лучшая прокрутка во всей сети реализует выпадающее обновление и подтягивающую загрузку.

Vue.js

предисловие

Распространенный эффект на мобильных страницах: pulldownrefresh и pullupload, целью которых является усиление эффекта взаимодействия с пользователем, поэтому один за другим появляются различные мобильные скользящие плагины.Сегодня Xiaobian здесь для вас.Рекомендуется скользящий плагин:better-scroll.

Адрес гитхаба:better-scroll

Используя лучшую прокрутку, также очень легко добиться вышеуказанного эффекта.

  1. vue создать проект

Проект создается на основе скаффолдинга vue-cli, поэтому сначала необходимо создать проект (этапы опущены).

  1. представлятьbetter-scrollплагин

скачать:npm install better-scroll --save

В проекте представлено:import BScroll from 'better-scroll'

После импорта мы можем пройтиnew BScroll()Получите экземпляр объекта прокрутки, основной синтаксис better-scroll:

let wrapper = document.querySelector('.wrapper') 
let scroll = new BScroll(wrapper, {})

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

图解

Поскольку мы используем его в проекте vue, здесь необходимо подчеркнуть, что при инициализации better-scroll для получения объекта прокрутки вы должны убедиться, что DOM-структура отрисовывается, то есть, better-scroll может быть инициализирован только после того, как содержимое в оболочке отображается, в противном случае это может привести к сбою скольжения. Обычно мы можем поместить инициализацию BScroll вthis.$nextTickФункция обратного вызова выполняется, потому что DOM обертки в это время отрендерился, и мы можем правильно вычислить его и высоту его внутреннего содержимого, чтобы обеспечить нормальную прокрутку.

здесьthis.$nextTickЭто асинхронная функция. Чтобы гарантировать, что DOM был визуализирован, заинтересованные студенты могут узнать о деталях его внутренней реализации. Используется нижний слой.MutationObserverилиsetTimeout(fn, 0). На самом деле здесь мы можем заменить this.$nextTick на setTimeout(fn, 20) (20 мс — это эмпирическое значение, а каждый тик равен примерно 17 мс), что незаметно для пользователя.

  1. Настраивается при инициализации BScrollpullUpLoadа такжеpullDownRefreshАтрибуты
mounted () {
  ...发Ajax得到数据...
...

  this.$nextTick(() => {
    this.myScroll = new BScroll(this.$refs.wrap, {
      scrollY: true,
      pullDownRefresh: {
        threshold: 50,
        probeType: 3
      },
      pullUpLoad: {
        threshold: 744
      }
    })
  })
}

pullDownRefreshУказывает, что обновление с раскрывающимся списком включено.pullUpLoadУказывает, что подтягивающая загрузка включена, а значения по умолчанию — всеfalse, вы можете увидеть конкретное использование здесьbetter-scrollAPI официального сайта. Потому что в большинстве случаев страница сначала получает данные из бэкенда, а потом рендерит DOM-структуру, поэтому я использую vuemountedВ хуке сначала отправьте Ajax для получения данных, а затем используйте this.$nextTick(), чтобы убедиться, что DOM визуализируется, а затем инициализируйте BScroll.

  1. Привязать к объекту экземпляра BScrollpullingUpа такжеpullingDownмероприятие

События pullingUp и pullingDown соответствуют триггерным событиям подтягивающей загрузки и вытягивающего обновления, соответственно, и некоторые другие операции могут выполняться в их функциях обратного вызова, например получение общих данных из фона и т. д. Помните, что он должен вызываться в конце обратного вызова.finishPullUp()а такжеfinishPullDown()BSCROLL Способ выполнения операции загрузки LAC и выдвигающую обновление, в противном случае загрузка LAC и обновления раскрывающегося эффекта будет только срабатывать только один раз, лично проверить! После того, как вы получите данные, если обертка внутри структуры меняется, обязательно позвонитrefresh()Метод повторно инициализирует BScroll, иначе он вызовет скользящее исключение.


this.myScroll.on('pullingDown', () => {

  ...发送Ajax从后台拿数据...
  ...
  this.$nextTick(() => {
    this.myScroll.refresh() // DOM 结构发生变化后，重新初始化BScroll
  })
  this.myScroll.finishPullDown() // 下拉刷新动作完成后调用此方法告诉BScroll完成一次下拉动作
})

this.myScroll.on('pullingUp', () => {

  ...发送Ajax从后台拿数据...
  ...
  this.$nextTick(() => {
    this.myScroll.refresh() // DOM 结构发生变化后，重新初始化BScroll
  })
  this.myScroll.finishPullUp() // 上拉加载动作完成后调用此方法告诉BScroll完成一次上拉动作
})
  1. Полные визуализации

послесловие

Эта статья изначально была взята из моего репозитория GitHub:web-study, если вы считаете, что эта статья полезна для вашего начального обучения, я надеюсь датьstar, Я также буду регулярно обновлять содержимое склада, добро пожаловать на перепечатку, спасибо. Адрес склада:web-study

Если у вас есть лучшая рекомендация по мобильному скользящему плагину, добро пожаловать, оставьте сообщение, обмен знаниями также является своего рода обучением.

Категории