使用 Phonegap 将字母滚动条添加到 Android 应用程序中的列表视图

Posted

技术标签:

【中文标题】使用 Phonegap 将字母滚动条添加到 Android 应用程序中的列表视图【英文标题】：Add Alphabetical Scroll Bar to List View in an Android App Using Phonegap 【发布时间】：2015-06-22 06:34:12 【问题描述】：

我是 android 应用开发的新手，我目前正在构建一个简单的歌本应用，主页上的列表视图显示歌曲列表。点击歌曲将带您进入包含歌词的页面。

我正在使用 Dreamweaver CC 和 Phonegap。这是一个非常简单的过程，我已经完成了一切。我只需要像大多数列表应用程序一样在列表的右侧添加一个按字母顺序排列的滚动条。

这是我的索引页代码：

<div id="page" data-role="page">
<div data-role="header">
  <h1>Song Book</h1>
</div>
<div data-role="content">   
    <ul data-role="listview">
        <li data-role="list-divider" data-theme="c">A</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">B</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">C</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">D</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">E</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">F</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">G</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">H</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">I</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">J</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">K</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">L</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">M</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">N</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">O</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">P</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">Q</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">R</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">S</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">T</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">U</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">V</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">W</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">X</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">Y</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
        <li data-role="list-divider" data-theme="c">Z</li>
            <li><a href="#page2">A Common Love</a></li>
            <li><a href="#page3">Song 2</a></li>
            <li><a href="#page4">Song 3</a></li>
    </ul>       
</div>

我已经在网上找了几个小时了，但我没有找到可以工作的好解决方案。我对字母表中的每个字母都使用了列表分隔符。我可以设置一个滚动条来导航到每个列表分隔符吗？

在我的列表中添加按字母顺序排列的滚动条的最佳方式是什么？

谢谢！

【问题讨论】：

查看 jQM 演示页面：demos.jquerymobile.com/1.4.5/listview-autodividers-linkbar 【参考方案1】：

可能，但我想知道对于这么小的屏幕，导航是否顺畅

html

<div data-role="page" id="list">
    <div data-role="content">

        <ul data-role="listview">
            <li data-role="list-divider" id="a">A</li>
            <li class="showDetails">
                Adam Kinkaid
            </li>
            <li class="showDetails">Alex Wickerham</li>
            <li class="showDetails">Avery Johnson</li>
            <li data-role="list-divider" id="b">B</li>
            <li class="showDetails">Bob Cabot</li>
            <li data-role="list-divider" id="c">C</li>
            <li class="showDetails">Caleb Booth</li>
            <li class="showDetails">Christopher Adams</li>
            <li class="showDetails">Culver James</li>
            <li data-role="list-divider" id="d">D</li>
            <li class="showDetails">David Walsh</li>
            <li class="showDetails">Drake Alfred</li>
            <li data-role="list-divider" id="e">E</li>
            <li class="showDetails">Elizabeth Bacon</li>
            <li class="showDetails">Emery Parker</li>
            <li class="showDetails">Enid Voldon</li>
            <li data-role="list-divider" id="f">F</li>
            <li class="showDetails">Francis Wall</li>
            <li data-role="list-divider" id="g">G</li>
            <li class="showDetails">Graham Smith</li>
            <li class="showDetails">Greta Peete</li>
            <li data-role="list-divider" id="h">H</li>
            <li class="showDetails">Harvey Walls</li>
            <li data-role="list-divider" id="m">M</li>
            <li class="showDetails">Mike Farnsworth</li>
            <li class="showDetails">Murray Vanderbuilt</li>
            <li data-role="list-divider" id="n">N</li>
            <li class="showDetails">Nathan Williams</li>
            <li data-role="list-divider" id="p">P</li>
            <li class="showDetails">Paul Baker</li>
            <li class="showDetails">Pete Mason</li>
            <li data-role="list-divider" id="r">R</li>
            <li class="showDetails">Rod Tarker</li>
            <li data-role="list-divider" id="s">S</li>
            <li class="showDetails">Sawyer Wakefield</li>
        </ul>

        <ul data-role="none" id="list-navigation">
            <li>
                <p id="list-1" class="scrollToSelected"><strong>1</strong></p>
                <p id="list-2" class="scrollToSelected"><strong>2</strong></p>
                <p id="list-3" class="scrollToSelected"><strong>3</strong></p>
                <p id="list-a" class="scrollToSelected"><strong>A</strong></p>
                <p id="list-b" class="scrollToSelected"><strong>B</strong></p>
                <p id="list-c" class="scrollToSelected"><strong>C</strong></p>
                <p id="list-d" class="scrollToSelected"><strong>D</strong></p>
                <p id="list-e" class="scrollToSelected"><strong>E</strong></p>
                <p id="list-f" class="scrollToSelected"><strong>F</strong></p>
                <p id="list-g" class="scrollToSelected"><strong>G</strong></p>
                <p id="list-h" class="scrollToSelected"><strong>H</strong></p>
                <p id="list-i" class="scrollToSelected"><strong>I</strong></p>
                <p id="list-j" class="scrollToSelected"><strong>J</strong></p>
                <p id="list-k" class="scrollToSelected"><strong>K</strong></p>
                <p id="list-l" class="scrollToSelected"><strong>L</strong></p>
                <p id="list-m" class="scrollToSelected"><strong>M</strong></p>
                <p id="list-n" class="scrollToSelected"><strong>N</strong></p>
                <p id="list-o" class="scrollToSelected"><strong>O</strong></p>
                <p id="list-p" class="scrollToSelected"><strong>P</strong></p>
                <p id="list-q" class="scrollToSelected"><strong>Q</strong></p>
                <p id="list-r" class="scrollToSelected"><strong>R</strong></p>
                <p id="list-s" class="scrollToSelected"><strong>S</strong></p>
                <p id="list-t" class="scrollToSelected"><strong>T</strong></p>
                <p id="list-u" class="scrollToSelected"><strong>U</strong></p>
                <p id="list-v" class="scrollToSelected"><strong>V</strong></p>
                <p id="list-w" class="scrollToSelected"><strong>W</strong></p>
                <p id="list-x" class="scrollToSelected"><strong>X</strong></p>
                <p id="list-y" class="scrollToSelected"><strong>Y</strong></p>
                <p id="list-z" class="scrollToSelected"><strong>Z</strong></p>
            </li>
        </ul>

    </div>
</div>

<div data-role="page" id="details">
    <div data-role="content">

        <ul data-role="listview">
            <li data-role="list-divider">Details</li>
            <li><a href="#list" data-direction="reverse">List</a></li>
        </ul>
        <br />
        <p>
            Here are the details you were looking for
        </p>

    </div>
</div>

css

#list-navigation 
    color:#696969;

    position:absolute;
    right:0px;
    top:0px;
    z-index:200;

JS

$('.scrollToSelected').bind('click', function() 
    var view = $(this).attr('id');
    var list = view.split('-');
    var elem = $("#"+list[1]);

    // not sure if this is offset or position
    var position = elem.position(); 
    var offset   = elem.offset();


    $.mobile.silentScroll(position.top);


);

$('.showDetails').bind('click', function() 
    $.mobile.changePage( "#details",  transition: "slideup" );
);

小提琴

http://jsfiddle.net/qXT9Z/32/

【讨论】：

以上是关于使用 Phonegap 将字母滚动条添加到 Android 应用程序中的列表视图的主要内容，如果未能解决你的问题，请参考以下文章

将加载指示器/进度条添加到 Phonegap Android 闪屏

iOS PhoneGap jQuery Mobile App 中的可见滚动条

如何在phonegap中隐藏ios滚动条

将垂直滚动条添加到面板

将滚动条添加到 <textarea> [重复]

将垂直滚动条添加到 shinyjs 下拉按钮 - 闪亮