移动HTML5/Jquery中的可滚动列表视图

Question

我正在用mobilejquery实现一个购物清单应用程序。基本结构如下：

<div>
<canvas id="header"></canvas>
<ul id="list">
    <li> ... </li>
    ...
</ul>
</div>

画布是手机顶部的一个标题。"li"的列表将在运行时使用jquery添加到DOM中。

我有以下两个要求：1.滚动ul时，页眉应保持在同一位置。2.整个div的大小应该与显示大小相同，不考虑li的数量。也就是说，li在滚动时应该动态出现和消失。

移动jquery可能吗？非常感谢。

Answer 1

是的，有不同的方法可以实现这一点。以下是一种方法的演示：http://jsfiddle.net/ezanker/VE9XM/2/

我修改了您的标记，使其有一个jQM页面div，然后是一个容器div，其大小将与设备相匹配：

<div data-role="page" id="page1">
    <div id="contDiv">
        <canvas id="header"></canvas>
        <div id="listDiv">
            <ul id="list" data-role="listview">
                <li>...</li>
                <li>...</li>
            </ul>
        <div>
    </div>
</div>

然后，我设置CSS，使标题画布绝对位于顶部，并且列表容器填充页面的其余部分，如果列表超过可用高度，则允许滚动：

html, body, #page1, #contDiv {
    margin: 0;
    padding : 0;
}
#header {
    position: absolute;
    top:  0px;
    left: 0px;
    width: 100%;
    height: 48px;
    background-Color: #555;
}
#listDiv {
    position: absolute;
    top: 0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    margin-top: 48px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

最后，我有一些javascript，它根据显示调整容器div的大小，并捕获resize和orientation更改事件，以使div保持正确的大小。

function ScaleContentToDevice() {
    scroll(0, 0);
    var viewportHeight = $(window).height();
    var content = $("#contDiv");
    var contentMargins = content.outerHeight() - content.height();
    var contentheight = viewportHeight - contentMargins;
    content.height(contentheight);
};
$(document).on("pageshow", function () {
    ScaleContentToDevice();
});
$(window).on('resize orientationchange', function () {
    ScaleContentToDevice()
}); 

附言：不要忘记viewport的元标签：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">

Answer 2

只需在ul样式中添加高度和溢出属性。在jquery mobile中工作。

<div><canvas id="header"></canvas>
<ul id="list" style="height:450px; overflow:scroll">
<li> ... </li>
...