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

【问题标题】：scrollable Listview in mobile HTML5 / Jquery移动 HTML5 / Jquery 中的可滚动列表视图
【发布时间】：2013-12-03 20:05:33
【问题描述】：

我正在使用移动 jquery 实现购物清单应用程序。基本结构如下：

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

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

我有以下两个要求： 1. 滚动 ul 时，标题应保持在同一位置。 2.整个div的大小要和显示的大小一样，li的个数要少。也就是说，li应该在滚动时动态出现和消失。

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

【问题讨论】：

标签： listview jquery-mobile

【解决方案1】：

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

我修改了您的标记，使其具有一个 jQM 页面 div，然后是一个容器 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 的大小调整为显示大小，并捕获调整大小和方向更改事件以使 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()
});

附：不要忘记视口的元标记：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：