Question

如何在没有设置宽度和高度的情况下设置列表视图的滚动？如果我设置宽度和高度，它不适合所有屏幕分辨率。所以我不想设置宽度和高度。如果列表视图超过了四个元素，则应设置滚动。怎么可能？有什么建议吗？

  <ul data-role="listview" id="locationList" data-dismissible="false" name="locationList" data-inset="true">
        <li><a>Element 1</a></li>
        <li><a>Element 2</a></li>
        <li><a>Element 3</a></li>
        <li><a>Element 4</a></li>
        <li><a>Element 5</a></li>
        <li><a>Element 6</a></li>                     
    </ul>

Answer 1

为了获得结果，还有一个纯jQuery代码解决方案，不需要在ul元素中添加任何类。正如您在此FIDDLE中看到的那样，我只设置ul标签的高度，当元素超过7时自动标签变为溢出滚动
你还有两个用于增加或减少li标签长度的按钮，并查看脚本的运行情况
当你在jQuery的css方法中传递函数作为css属性的值时（参见checklen函数），你可以决定根据某些参数的该属性的值。在这种情况下，li标签的数量

 <script type="text/javascript">
$(document).ready(function(){
    function checkLen(len){
        $('#locationList').css('overflow-y',function(){
            if(len>7){return 'scroll'
                }else{return 'auto'}
            });
      };
    $('#a').click(function(){
        var len=$('ul li').length;
        $('<li><a>Element '+(len+1)+'</a></li>').appendTo('ul');
        checkLen(len);
        });
    $('#b').click(function(){
        $('li:last').remove();
        var len=$('ul li').length;
        checkLen(len);
        });

});
</script>

Answer 2

使用宽度％（百分比）代替修复PX（像素），它将起作用。

Answer 3

要使滚动起作用，您必须提供高度和宽度。但是，您可以使用jquery检查列表项，如果其中包含4个以上的项，则可以对其应用高度和宽度。

此外，要显示滚动，您必须使用overflow属性。因此，当您列出的项目超过4时，您可以应用此项。您可以创建一个类：

.showScroll {
    width:200px;
    height: 150px;
    overflow:scroll;
    background-color:gray;
}

并使用jquery：

var countOfListItems = $("#locationList li").size();
if (countOfListItems > 4) {
    $("#locationList").toggleClass('showScroll');
}

在此处查看 - ＆gt; http://jsfiddle.net/TVK43/1/。这应该会给你一个更好的主意。

您还可以尝试使用Sharanpreet的答案，以％为单位使用宽度。

希望这有帮助!!!

如何设置列表视图的滚动条而不设置宽度和高度？

3 个答案: