Предисловие
В предыдущем разделе был мобильный проект, который должен был использовать обновленное обновление и нагрузку на подтягивание. Первым размышлением в моей голове было эффект Вейбо. В начале у меня были некоторые отклонения в моем понимании. Я думал, что раскрытие было также данными добавления, и подтягивание было данными добавления. Позже я спросил своих коллег и обнаружил, что раскрытие было лишь обновлением последних данных, а подтягивание было данными добавления.
Советы по использованию
1. См. IScroll.js и добавьте два прослушивания событий во время инициализации: Touchmove и Domcontentloaded.
2. Реализуйте событие подключения подключения IScroll, то есть в этом случае, вызовите свой собственный метод AJAX, чтобы обновить и добавлять данные.
3. При подтягивании и загрузке большего количества запросов в фоновом режиме он эквивалентен данным запроса на пейджинг. В настоящее время параметр PageIndex должен быть отправлен во время запроса AJAX, и при инициализации загрузки необходимо возвращать узорный фон для судьи на переднем плане.
4. Наиболее важным является реализация метода обновления (PulldOWNANCET) и метода подтягивания (PuluPaction).
Диаграмма бега
Метод реализации
var myscroll, pulldownel, pulldownoffset, pullupel, pullupoffset, genedcount = 0;/** * Окружение обновления (настроить этот метод) * myscroll.refresh (); После того, как данные загружаются, вызовите метод обновления интерфейса */function utldownaction () {settimeout (function () {var el, li, i; el = document.getelementbyid ('thelist'); для (i = 0; i <3; i ++) {li = document.createElement ('li'); li el.childnodes [0]); }/** * Прокрутите и поверните страницы (настроить этот метод) * myscroll.refresh (); // После загрузки данных вызовите метод обновления интерфейса*/function pullupaction () {settimeout (function () {// <- Симулировать перегрузку сети, удалить settimeout из производства! Var el, li, i; el = document.getElementbyid ('thelist'); для (i = 0; i <3; i ++) {li = document.createled (i = 0; i <3; i ++) {li = document.createled ('li = 0; (++ сгенерировал); }/*** Инициализируйте элемент управления iscroll*/function load () {pulldownel = document.getElementByid ('uplldown'); utlldownoffset = utlldownel.offsetheight; pullupel = document.getElementById ('подтягивание'); pullupoffset = pullupel.offsetheight; myscroll = new iscroll ('warpper', {scrollbarclass: 'myscrollbar', useTransition: false, topoffset: upldownoffset, onrefresh: function () {if (upledown.classname.match ('загрузка')) {pulldownel.classname = ''; OutldOnel.querySelector ('. Pulldownlabel'). innerhtml = 'ulldown refresh ...'; onscrollmove: function () {if (this.y> 5 &&! puldownel.classname.match ('flip')) {ulldownel.classname = 'flip'; pulldownel.classname.match ('flip')) {pulldownel.classname = ''; ! pullupel.classname.match ('flip')) {pullupel.classname = 'flip'; pullupel.classname.match ('flip')) {pullupel.classname = ''; pulldownel.classname = 'Загрузка'; pullupel.queryselector ('. Pulluplabel'). innerhtml = 'Загрузка ...'; setTimeout (function () {document.getElementById ('warper'). style.left = '0';}, 800);} // Инициализировать контрольный документ для привязки iscroll.Суммировать
Главное-выполнить некоторые операции инициализации на IScroll, отобразить различную информацию о приглашении для различных действий, а затем написать соответствующие обновления и загрузить больше методов обработки для разворачивания и раздвижных событий.