HTML5 · 2015年2月10日 0

jquery mobile + iscroll + iscrollview 开发滚动翻页功能

刚开始项目只是选择了iscroll框架实现滚动翻页,后来和jquery mobile(jqm)框架整合后,界面没法使用

在网上搜索了很多资料,各种尝试后还是问题很多。最后在老外的网站上发现了jquery-mobile-iscrollview框架,用于整合jquery mobile和iscroll的一个开源框架,处理了很多jquery mobile和iscroll整合中出现的问题。

1、jquery-mobile-iscrollview下载地址:https://github.com/watusi/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>标签中。

<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的版本替换为项目中使用的版本后,该功能依旧没有出现问题

 

Share this: