La carga de listas es una extracción móvil y desplegable que carga más componentes. Se basa principalmente en componentes desarrollados basados en iscroll.js v5.1.2. La biblioteca básica puede usar jQuery.js o zepto.js para operar el nodo DOM. Actualmente, uso ZeptO.js como la biblioteca básica para operar el DOM y existen en forma de un complemento jQuery. Si no desea usarlo como un complemento, solo necesita portar directamente la carga de listas en la biblioteca que necesita, está bien. La carga de listas está diseñada principalmente para terminales móviles. Al usar el navegador, viene con desplazamiento. La experiencia del usuario es muy hostil y es muy diferente de Android e iOS. Por lo tanto, elige iscroll.js. Su método de implementación es usar la animación CSS3 Traduce la conversión 2D para lograr el efecto de desplazamiento. El atributo Transform utiliza la aceleración de hardware, y el método de rendimiento ha mejorado enormemente.
instalación de NPM
La copia del código es la siguiente:
NPM instalación -g Listading
Cómo usarlo es el siguiente:
1. Estructura HTML
La misma estructura que el IScroll creó, pero el nodo de elemento creado especificado debe especificar la ID, porque se requiere una identidad identificable para publicar el modo de suscripción en el componente. Debido a que el IScroll debe establecer la altura antes de que se cree el elemento de nodo, de lo contrario no será desplazable; El IScroll se crea y se asigna al primer elemento secundario en desplazarse, por lo que la actualización de pull-up y desplegable de la carga de listas también se agrega al primer elemento secundario. De hecho, imagine el primer elemento infantil como el cuerpo en HTML.
2. JS que necesita ser introducido
<script src = "../ src/jslib/zepto.min.js"> </script> <script src = "../ src/jslib/iscroll.js"> </script> <script src = "../ build/listload.js"> </script>
3. Llame
var m = 3, n = 0; // debe establecer la altura del elemento principal antes de crear un IScroll, de lo contrario no puede arrastrar iscroll $ ('#list loading'). Height ($ (Window) .Height ()); // Template o AJAX Método de solicitud Var createhtml = function () {var __html = ''; para (var i = 0; i <15; i++++{ahora) Fecha (). componente ... </li> ';} return __html;} // El selector debe ser una identificación porque es necesario usar la suscripción de Publish como el identificador var list loading = $ ('#list loading '). listarging ({discapletime: true, // Si se requiere tiempo requerido pullupaction: function (cb) {// extracción carga más m-; var; var __html requerido. createHtml (); if (m <1) {flg = true;} else {$ ('#ordre-list'). append (__ html);} // Después de que se cargan los datos, es necesario devolver el final a verdadero a true. createHtml (); $ ('#Order-List'). Html (__ html) ;/ Después de ejecutar el método de ejecución, la devolución de llamada debe ejecutarse. Bubbles, también recomienda escribir el método de clic por sí solo. Si habilita PreventDefault a False, esta línea resolverá el problema de la falla de OnClick. Sin embargo, si abre este valor y lo arrastra bajo WeChat, habrá problemas. Después de que termina la diapositiva, el desplazamiento no se puede activar. Así que incrusté un método de evento yo mismo listloading.evt ('li', 'hacer clic', function (dom) {// dom.remove (); // $ ('#ordre-list'). Append (createHtml ()); // listloading.refresh ();});Diagrama de reproducción
/P>
4. API
4.1 Tire hacia abajo para actualizar
La inicialización se ejecutará una vez, principalmente para crear un ISCROLL, y luego cada actualización desplegable se ejecuta después del final de cada actualización desplegable. Después de la ejecución de su programa en el método, se debe ejecutar una función de devolución de llamada para informar a todos los programas que se han ejecutado, la carga de listas llamará automáticamente la función de actualización de ISCROLL, y la devolución de llamada no requiere una transmisión de parámetros.
options.pulldowaction = function (cb) {// tire hacia abajo para actualizar ... // Después de ejecutar el método de ejecución, la devolución de llamada cb () debe ejecutarse;}4.2 Actualización de pull-up
Cada actualización de pull-up se ejecuta después de que se completa la actualización. Se requiere lo mismo para ejecutar una función de devolución de llamada después de ejecutar su programa. Se requiere un valor booleano en la devolución de llamada. Si es cierto, ¿por qué se ha cargado y se ha tirado hasta el final?
options.pullUpAction = function (cb) {// despliegue de actualización ... // Después de ejecutar el método de ejecución, la devolución de llamada debe ser verdadera para tirar hacia abajo al final cb (true);}4.3 Destruir la carga de listas
La copia del código es la siguiente:
ListLoading.destroy ();
4.4 Actualización de la lista de listas
Si hay adiciones y eliminaciones en el nodo del área de desplazamiento, debe llamar a este método después de que se complete la operación.
La copia del código es la siguiente:
ListLoading.Refresh ();
4.5 Si se debe mostrar el valor predeterminado del tiempo es falso
Verdadero desplegable Muestra la hora, el tiempo de la última actualización
La copia del código es la siguiente:
options.disableTime = True
4.6 Pule hacia arriba para refrescar el texto
La copia del código es la siguiente:
options.uploadMoretxt = 'Pull Up para actualizar el texto'; // Puede poner etiquetas HTML en él
4.7 Tire hacia abajo para refrescar el texto
La copia del código es la siguiente:
opciones.pulldRefreshtxt = 'Arrastre hacia abajo para actualizar el texto'; // Puede poner etiquetas HTML en él
4.8 Cargando caracteres chinos
La copia del código es la siguiente:
opciones.loaderTxt = 'Los caracteres chinos están cargando'; // Puede poner etiquetas HTML en él
4.9 Liberar texto de actualización
La copia del código es la siguiente:
opciones.RealTimetxt = 'Release Refresh Text'; // Puedes poner etiquetas HTML dentro
4.10 Todos los textos se han cargado
La copia del código es la siguiente:
opciones.loaderendTxt = 'Todo el texto ha sido cargado'; // Puede poner etiquetas HTML en él
4.12 Configuración de IScroll
La copia del código es la siguiente:
options.IscrolloPtions = {};
Lo anterior es el componente de actualización desplegable de terminal móvil de List Loading.js introducido por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!