Совместное использование реализации собственного выпадающего обновления небольшой программы scroll-view

внешний интерфейс GitHub JavaScript Апплет WeChat CSS Открытый исходный код

Несколько дней назад я поделился самодельным опенсорсным проектом по расширению небольших программных компонентов (портал)

Изначально я хотел обмануть звезду за первый выпущенный мной открытый исходный код, в итоге статья понравилась многим добросердечным друзьям, что меня немного смутило, поэтому я решил написать несколько сухих вещей, чтобы рассказать о том, как это было реализовано.

На самом деле он относительно прост, в первую очередь под кастомный компонентscroll-viewУстанавливается выше, чем высота самого компонента40px, то есть высоту области, где заголовок отображает обновленный текст, а затем пустьscroll-viewсмещение по оси Y-40px, чтобы обновленная текстовая область не была видна вверху, конкретный css выглядит следующим образом:

.scroll-view {
  height: calc(100% + 40px);
  transform: translateY(-40px);
}

Затем мониторингscroll-viewизonscrollСобытия, здесь я делю статус выпадающего обновления на пять типов:

//这段偷懒没写在代码里，直接用的数字
const _pullDownStatusDic =  {
  invisiable: 0,  //看不见
  pulling: 1,     //下拉时
  release: 2,     //可松开刷新时
  refresing: 3,   //正在刷新
  finish: 4,      //刷新完成
}

Затем в прослушивателе событий в соответствии с текущимscrollTopЧтобы определить, в каком состоянии он должен находиться:

//height就是预设的下拉至多少高度时刷新
if (scrollTop < -1 * height) {
  targetStatus = 2;
} else if (scrollTop < 0) {
  targetStatus = 1;
} else {
  targetStatus = 0;
}

Вопрос в том, когда он будет обновлен? апплетscroll-viewнисколькоonscrollendЭто событие, так я думалontouchend, в конце концов, вы можете использовать касание только для прокрутки на мобильных телефонах (кроме нажатия на голову, чтобы вернуться наверх), поэтому вам нужно толькоontouchendПрослушайте событие, если текущее состояние раскрывающегося списка равно 2 (_pullDownStatusDic.release), то есть при выпуске обновляемого активируется обновление:

if (status === 2) {
  this.setData({
    pullDownStatus: 3,
  })
  this.properties.refreshing = true,
  this.triggerEvent('pulldownrefresh');
}

Конечно, на данный момент все еще есть проблема, нам нужно отображать текст обновления локально, мы не можем этого сделать.scroll-viewизscrollTopустановлено отрицательное число, поэтому толькоscroll-viewСмещение по оси Y оси Y отменяется для решения (проблема в том, что будет отскок при отпускании, и вы найдете способ его оптимизировать позже)

После завершения обновленияscroll-viewСмещение по оси Y возвращается с помощью анимации CSS.-40px(использоватьtranslateвместоmarginПросто для плавности анимации здесь) это завершает выпадающее обновление.

Разве это не просто :)

Так же есть мелкие детали, загрузки больше, иxing-imageНекоторые реализации проще, если интересно, можете посмотреть исходный код.

Наконец обмануть волну звезд:View on Github

Категории