Question

我正在尝试将进度微调器添加到显示搜索结果的onsen-list元素。每次我添加进度elemet并编译它或列表时，搜索输入会在我输入时消失 - 但仅在调试器应用程序中。这是我的代码：

页：

<ons-page id="search-page">

<ons-toolbar>
    <div class="center">Search</div>
</ons-toolbar>

<div class="navigation-bar">
    <div class="navigation-bar__center">
        <input id="srch" type="search" class="search-input" autocomplete="off" autocorrect="off" autocapitalize="on" spellcheck="false">
        <button id="btn-clear-search"><ons-icon icon="ion-android-cancel" size="20px"></ons-icon></button>
    </div>
</div>

<ons-list id="lst-srch"></ons-list>

</ons-page>

脚本：

var $lstSrch = $( "#lst-srch" );

if( $( '.srch-progress' ).length == 0 ) {
    var $srchProgress = $('<ons-list-item>' +
            '<ons-row>' +                       
                '<ons-col>' +
                    '<center class="srch-progress"><ons-icon icon="ion-load-c" spin="true"></ons-icon></center>' +
                '</ons-col>' +
            '</ons-row>' +
        '</ons-list-item>');

    $lstSrch.prepend( $srchProgress );
    ons.compile( $( "#lst-srch" )[0] );
}

有没有更好的方法来显示搜索进度？

Answer 1

更简单的方法是将它包含在html中（你不需要为它编译），然后用jquery隐藏它。

这样的事情：

 <ons-page id="search-page">

    <ons-toolbar>
        <div class="center">Search</div>
    </ons-toolbar>

    <div class="navigation-bar">
        <div class="navigation-bar__center">
            <input id="srch" type="search" class="search-input" autocomplete="off" autocorrect="off" autocapitalize="on" spellcheck="false">
            <button id="btn-clear-search"><ons-icon icon="ion-android-cancel" size="20px"></ons-icon></button>
        </div>
    </div>

    <ons-list id="lst-srch">
        <ons-list-item id="mySpinner">
            <ons-row>                       
                <ons-col>
                    <center class="srch-progress"><ons-icon icon="ion-load-c" spin="true"></ons-icon></center>
                </ons-col>
            </ons-row>
       </ons-list-item>

    </ons-list>
</ons-page>

在JQuery中只需：

$('#mySpinner').hide();

Onsen UI编译隐藏页面元素

1 个答案: