Prefacio
En la sección anterior, había un proyecto móvil que necesitaba usar la actualización desplegable y la carga pull-up más efectos. El primer reflejo en mi mente fue el efecto de Weibo. Al principio, tenía algunas desviaciones en mi comprensión. Pensé que desplegable también era un datos de adjunta, y la pull-up era un dato de anexo. Más tarde, pregunté a mis colegas y descubrí que el despliegue era solo una actualización de los últimos datos, y Pull-Up era un datos de anexos.
Consejos de uso
1. Consulte ISCROLL.JS y agregue dos eventos escuchando durante la inicialización: Touchmove y DomContentLoaded.
2. Implemente el evento Onscrollend del complemento ISCROLL, es decir, en este evento, llame a su propio método AJAX para actualizar y agregar datos.
3. Al retirar y cargar más solicitudes en segundo plano, es equivalente a los datos de solicitud de paginación. En este momento, el parámetro PageIndex debe enviarse durante la solicitud AJAX, y al inicializar la carga, se debe devolver un pageCount desde el fondo para que el primer plano juzgue.
4. Lo más importante es implementar el método de actualización de pulldown (pulldownaction) y el método de carga de pullup más (pullupaction).
Diagrama de efectos de funcionamiento
Método de implementación
var myScroll, pulldownel, pulldowoffset, pullupel, pullupOffset, generadocount = 0;/** * renovación de polvo (personalizar este método) * myScroll.Refresh (); Después de que se cargan los datos, llame al método de actualización de la interfaz */function pullDownAction () {setTimeOut (function () {var El, li, i; el = document.getElementById ('theList'); for (i = 0; i <3; i ++) {li = document.createElement ('li'); li.innertx = 'generado fila'+(+++generatesseNinSeinSeinsCount); El.ChildNodes [0]); }/** * Scroll y gire las páginas (personalice este método) * myscroll.refresh (); // Después de la carga de datos, llame al método de actualización de la interfaz*/function PullUpAction () {setTimeOut (function () {// <- simule la congestión de la red, elimine setTimeOut de producción! Var el, li, i; el = document.getElementById ('thElist'); for (i = 0; i <3; i ++) {liebre.createelement ('li'); li.ineText '. (++ GeneratedCount); }/*** Inicialice el control ISCROLL*/function Loaded () {pulldownel = document.getElementById ('pulldown'); pulldownOffset = pulldownel.OffSetheight; pullupel = document.getElementById ('pullup'); pullupOffSet = pullupel.offsetheight; myScroll = new Iscroll ('WRAPPER', {scrollBarClass: 'myScrollBar', useTransition: false, topOffset: pulldownOffset, onRefresh: function () {if (pulldownel.classname.match ('carging')) {pulldownel.classname = ''; pulldownel.queryselector ('. pulldownlabel'). onScrollMove: function () {if (this.y> 5 &&! Puldownel.className.match ('flip')) {pulldownel.classname = 'flip' pulldownel.classname.match ('flip')) {pulldownel.classname = ''; !pullUpEl.className.match('flip')) { pullUpEl.className = 'flip'; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Save it aside and start updating...'; this.maxScrollY = this.maxScrollY; } else if (this.y > (this.maxScrollY + 5) && pullupel.classname.match ('flip')) {pullupel.classname = ''; {pulldownel.classname = 'loading'; pullupel.Queryselector ('. PULLUPLABEL'). InnerHtml = 'Loading ...'; setTimeOut (function () {document.getElementById ('wrapper'). style.left = '0';}, 800);} // Inicializar el control de IScroll vinculante.Resumir
Lo principal es hacer algunas operaciones de inicialización en ISCROLL, mostrar una información de solicitud diferente para diferentes acciones y luego escribir la actualización correspondiente y cargar más métodos de procesamiento para eventos desplegables y pull-up.