0

リストビューの更新機能に iscroll を使用します。jquery モバイルの他のページでのページ スクロールを無効にします。

<script type="text/javascript" src="/js/iscroll.js"></script>

base-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 でページまでスクロールできません。誰かが私に方向性を教えてくれますか、それを行う方法を教えてください。

前もって感謝します。

4

1 に答える 1

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

于 2013-04-28T17:55:42.013 に答える