使用jqueryMobile怎么分页
2016-07-26 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
1、jquery-mobile-iscrollview下载
解压后的\jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\source路径下是需要引用的js和css文件
\jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\build路径下是各个jquery mobile版本下的列表和滚动翻页的例子
在该路径下，我选择了pull_14.html文件，用chrome打开后，发现下面的导航栏变形，将
<link href="stylesheets/demo.css" media="screen" rel="stylesheet" type="text/css" />
<script src="javascripts/demo.js" type="text/JavaScript"></script>
去掉后，下面的导航栏正常了
页面中引用的pull-example.js文件是上拉、下拉事件的处理，只需要将gotPullDownData和gotPullUpData函数修改一下即可实现自己需要加载的数据
2、直接测试该功能没有什么问题，当把该翻页的页面链接到其他页面上时，通过链接打开该页面，下面的导航栏又出现了问题
后来发现，这是问题可能是由于jqm的外部页面链接引起的错。jqm在使用外部链接打开另一个页面时，会使用ajax读取需要打开的文件，然后将该文件动态加载到已经打开的页面的后面，jqm只加载文档中取出的第一个页面（第一个带有role="page"的div），其他内容都将被忽略。
后来，将列表页面(b.html)所有加载的css和js的标签放到链接该页面的页面(a.html)的<head>标签中。
[html] view plain copy
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="../jquery.mobile-1.4.2.min.css" type="text/css">
<link href="../jquery.mobile.iscrollview.css" media="screen"
rel="stylesheet" type="text/css" />
<link href="../jquery.mobile.iscrollview-pull.css"
media="screen" rel="stylesheet" type="text/css" />
<script src="../jquery.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function(){
//容许ajax跨域访问
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="../jquery.mobile-1.4.2.min.js"
type="text/javascript"></script>
<script src="../javascripts/iscroll.js" type="text/javascript"></script>
<script src="../javascripts/jquery.mobile.iscrollview.js"
type="text/javascript"></script>
<script src="../javascripts/pull-example.js" type="text/javascript"></script>
当链接打开该页面后，列表页面稳定了
3、jquery-mobile-iscrollview中引用的jqm框架的版本没有项目中的高，试着将jqm的版本替换为项目中使用的版本后，该功能依旧没有出现问题
解压后的\jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\source路径下是需要引用的js和css文件
\jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\build路径下是各个jquery mobile版本下的列表和滚动翻页的例子
在该路径下，我选择了pull_14.html文件，用chrome打开后，发现下面的导航栏变形，将
<link href="stylesheets/demo.css" media="screen" rel="stylesheet" type="text/css" />
<script src="javascripts/demo.js" type="text/JavaScript"></script>
去掉后，下面的导航栏正常了
页面中引用的pull-example.js文件是上拉、下拉事件的处理，只需要将gotPullDownData和gotPullUpData函数修改一下即可实现自己需要加载的数据
2、直接测试该功能没有什么问题，当把该翻页的页面链接到其他页面上时，通过链接打开该页面，下面的导航栏又出现了问题
后来发现，这是问题可能是由于jqm的外部页面链接引起的错。jqm在使用外部链接打开另一个页面时，会使用ajax读取需要打开的文件，然后将该文件动态加载到已经打开的页面的后面，jqm只加载文档中取出的第一个页面（第一个带有role="page"的div），其他内容都将被忽略。
后来，将列表页面(b.html)所有加载的css和js的标签放到链接该页面的页面(a.html)的<head>标签中。
[html] view plain copy
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="../jquery.mobile-1.4.2.min.css" type="text/css">
<link href="../jquery.mobile.iscrollview.css" media="screen"
rel="stylesheet" type="text/css" />
<link href="../jquery.mobile.iscrollview-pull.css"
media="screen" rel="stylesheet" type="text/css" />
<script src="../jquery.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function(){
//容许ajax跨域访问
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="../jquery.mobile-1.4.2.min.js"
type="text/javascript"></script>
<script src="../javascripts/iscroll.js" type="text/javascript"></script>
<script src="../javascripts/jquery.mobile.iscrollview.js"
type="text/javascript"></script>
<script src="../javascripts/pull-example.js" type="text/javascript"></script>
当链接打开该页面后，列表页面稳定了
3、jquery-mobile-iscrollview中引用的jqm框架的版本没有项目中的高，试着将jqm的版本替换为项目中使用的版本后，该功能依旧没有出现问题
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
