Как реализовать эффект «тянуть до обновления» (стиль обновления Android) с помощью Javascript

Содержание

1 Установите плагин
2 Реализация

Жест с сенсорным экраном «тянуть-обновить» состоит из прикосновения пальцем к экрану вычислительного устройства или нажатия кнопки на указывающем устройстве, перетаскивания экрана пальцем или указательным устройством вниз и последующего его отпускания в качестве сигнала для Приложение для обновления (и других действий) содержимого экрана.

Этот плагин пригодится, если вы работаете с гибридными приложениями, используя веб-технологии и фреймворки, такие как cordova, ionic или phonegap.

Установите плагин

Чтобы создать эффект обновления в нашем проекте, мы будем использовать PulltoRefresh.js. PulltoRefresh — это небольшая, но мощная библиотека Javascript, созданная для поддержки функции обновления веб-приложения. Не нуждается в разметке, легко настраивается и не зависит от зависимостей.

штепсель Играть: просто установите, и вы готовы к работе.
Легкий вес: всего 8 КБ.
Свободная зависимость: вам не понадобится огромная структура, чтобы она работала.

Если вам нужна дополнительная информация о плагине, посетите Официальный репозиторий Github здесь.

Теперь, чтобы начать, скачать копию плагина здесь. С другой стороны вы можете использовать беседку:

bower install pulltorefreshjs

Или NPM:

npm install pulltorefreshjs

Теперь добавьте плагин в ваш HTML-документ, используя тег script:

И вы готовы использовать PulltoRefresh.js в вашем документе. Этот плагин представлен вам ребятами из Коробка Фактура.

Реализация

Хотя есть и другие плагины, такие как web-pull-to-refresh, PulltoRefresh.js — это плагин, который был хорошо проработан и протестирован во многих браузерах и довольно прост в использовании. Вам не нужна дополнительная разметка, чтобы она работала, поэтому это основные параметры практически всех разработчиков.

Чтобы добавить тягу для обновления efect к вашему документу, вам нужно всего лишь использовать следующий код:

PullToRefresh.init({
mainElement: 'body',
onRefresh: function(){
// What do you want to do when the user does the pull-to-refresh gesture
window.location.reload();
}
});

Обратите внимание, что вы можете изменить основной элемент, чтобы использовать его в конкретном элементе вашего приложения, используя селектор css (#element-id). Следующий gif показывает реализацию PulltoRefresh.js в нашем мире кода (хотя мы на самом деле не используем его, только для целей тестирования):

Вы можете легко настроить плагин, изменив некоторые свойства:

PullToRefresh.init({
mainElement: 'body',
onRefresh: function(){
// What do you want to do when the user does the pull-to-refresh gesture
},
distThreshold : 50, // Minimum distance required to trigger the refresh.
iconArrow: '', // The icon for both instructionsPullToRefresh and instructionsReleaseToRefresh
instructionsPullToRefresh: "Pull down to DESTROY THE WORLD",
instructionsReleaseToRefresh: "Release to ENABLE BOMB"
});

Просмотреть все доступные свойства при инициализации в API документация. Вы можете увидеть живой пример в домашняя страница плагина или же демо здесь. Удачного кодирования!