使用iscroll进行listview的刷新功能。它将禁用jquery mobile的其他页面上的页面滚动。
<script type="text/javascript" src="/js/iscroll.js"></script>
基mobile.html
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="xxx">
<meta name="keywords" content="yyyy">
<link rel="stylesheet" type="text/css" href="/css/jquery.mobile-1.3.1.css" />
<link rel="stylesheet" type="text/css" href="/css/mobile.css" />
<script src="/js/jquery-1.9.0.min.js"></script>
<script src="/js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/iscroll.js"></script>
item.html
{% extends "base-mobile.html" %}
{% block content %}
<div id="item" data-role="page">
<div data-role="header">
<h1 class="ui-title" role="heading" aria-level="1">Item</h1>
<a href="#all-items" data-inline="true" class="ui-btn-left" data-icon="arrow-l">Back</a>
</div>
<div data-role="content" class="ui-content" role="main">
<h2>title</h2>
<div id="category">
<label>Category: category </label>
</div>
<p>location</p>
<p>description</p>
<div id="map_canvas">
<img src="http://maps.googleapis.com/maps/api/staticmap?center=location&zoom=16&size=300x200&markers=xxx,xxx&sensor=false" ></div>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</div>
{% endblock %}
只需构建一个比iphone屏幕尺寸更大的页面。我无法向下滚动到我的模拟器或iPhone上的页面。任何人都可以指点我的方向或让我知道该怎么做,拜托?
提前致谢。
答案 0 :(得分:2)
我假设你有HTML,BODY和HEAD标签。你在使用“视口”设置吗?在HEAD中我使用:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
我可以在横向位置滚动您在iPhone上面张贴的页面。在纵向位置,页面不需要滚动。你能详细说明一下吗?
动态注入内容后,您使用的是.page()和/或.changePage()吗?
$('pageSelector').page();
此链接对我来说是一个很好的参考:http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html