Cómo utilizar jqueryMobile para implementar el desplazamiento de página
Busqué mucha información en el. Internet, y aún quedaban muchos intentos. Finalmente, encontré el marco jquery-mobile-iscrollview en un sitio web extranjero. Es un marco de código abierto para integrar jquery mobile e iscroll. Resuelve muchos problemas de integración de jquery mobile e iscroll.
1. Dirección de descarga de jquery-mobile-iscrollview:/watusi/jquery-mobile-iscrollview
Descomprimido\jquery-mobile-iscrollview-master\jquery-mobile jquery-mobile-iscrollview -master\demo\source path son los archivos js y css a los que se debe hacer referencia
\\jquery-Debajo de la ruta de compilación hay ejemplos de listas y páginas de desplazamiento en cada versión móvil de jquery
En esta ruta, seleccioné el archivo pull_14.html y lo abrí usando el navegador Chrome. Descubrí que la barra de navegación a continuación estaba distorsionada y cambiada
lt link href="stylesheets/demo". css" media="screen" rel="stylesheet" type="text/css" /gt;
lt;script src="javascript/demo.js" type="text/JavaScript"gt ; lt;/scriptgt;
Será normal después de eliminar la siguiente barra de navegación
El archivo pull-example.js al que se hace referencia en la página maneja eventos desplegables y desplegables. Solo necesita Puede modificar las funciones getPullDownData y getPullUpData para cargar los datos que necesita
2. No hay problema en probar esta función directamente cuando la página está vinculada a otras páginas, después de abrir la página. a través del enlace, la barra de navegación debajo ocurrió otro problema
Más tarde se descubrió que este problema puede deberse a un error causado por el enlace de la página externa de jqm. Cuando jqm usa un enlace externo para abrir otra página, usará ajax para leer el archivo que debe abrirse y luego cargará dinámicamente el archivo en el enlace de la página externa para abrir el archivo. Luego, el archivo se cargará dinámicamente detrás de la página abierta. jqm solo cargará la primera página extraída del documento (el primer div con rol="página") y el resto del contenido se ignorará.
Más adelante, todas las etiquetas css y js cargadas en la página de lista (b.html) se colocarán en la etiqueta
de la página (a.html) vinculada a esta página.[html] Ver texto sin formato
lt; meta http-equiv="Content-Type" content="text/html; charset=utf-8" /gt; p>
p>
lt;meta name="viewport"
content="ancho=ancho-dispositivo, escala-inicial=1, escala-máxima=1, escalable por el usuario= no" /gt;
lt;meta name="apple-mobile-web-app-capable" content="yes" /gt;
lt;meta name="apple -mobile-web-app-status-bar-style" content="black" /gt;
lt; link rel="stylesheet" href="./jquery.mobile-1.4.2.min .css" type= "text/css"gt;
lt; link href="./jquery.mobile.iscrollview.css" media="pantalla"
rel=" hoja de estilo" type=" text/css" /gt;
lt; link href="./jquery.mobile.iscrollview-pull.css"
media="screen" rel ="hoja de estilo" tipo ="text/css" /gt;
lt;script src="./jquery.js" tipo="text/javascript"/gt;lt;/scriptgt; p>
lt;scriptgt;
$(document).bind("mobileinit", function(){
// Permitir el acceso entre dominios ajax
$.mobile .allowCrossDomainPages = verdadero;
});
lt;/scriptgt;
lt;script src="./jquery. mobile-1.4.2.min.js"
type="text/javascript"gt；lt;/scriptgt;
lt;script src="./javascripts/iscroll. js" type="text /javascript"gt;lt;/scriptgt;
lt;scriptrc="./javascripts/jquery.mobile.iscrollview.js"
type=" text/javascript"gt; lt;/scriptgt;
lt;script src="./javascripts/pull-example.js "type="text/javascript"gt;lt;/scriptgt;
Cuando el enlace abre la página, la página de lista permanece estable
3. En jquery-mobile-iscrollview, todo.
La versión de jqm framework a la que se hace referencia no es superior a la utilizada en el proyecto, por lo que después de intentar reemplazar la versión de jqm con la utilizada en el proyecto, la característica seguirá funcionando.