Question

我试图理解如何使用JQuery实现ons-pull-hook组件。没有可用的例子。我的代码：

<ons-pull-hook on-action="load( $done )" var="loader">
    <span ng-switch="loader.getCurrentState()">
        <span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> Pull down to refresh</span>
        <span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> Release to refresh</span>
        <span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> Loading ...</span>
    </span>
</ons-pull-hook>

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

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

当我尝试引用＆＃34; loader＆＃34;在我的剧本中，它说它没有被发现。有人可以提供一个例子吗？

Answer 1

load( $done )应为load( done )，不含“$”。另外，use ons.ready获取loader变量。希望它有所帮助！

Answer 2

如果其他人遇到这个问题，我需要做的就是让它使用jQuery工作。

在我的索引页面中，我添加了：

<script>
    ons.bootstrap();
    var refreshList;
</script>

在我的列表页面中，我将其添加到顶部：

<ons-pull-hook on-action="refreshList( done )" var="myLoader">
    <span ng-switch="myLoader.getCurrentState()">
        <span ng-switch-when="initial"><ons-icon size="15px" icon="fa-long-arrow-down" fixed-width="true"></ons-icon><span style="vertical-align:middle;">Pull down to refresh...</span></span>
        <span ng-switch-when="preaction"><ons-icon size="15px" icon="fa-long-arrow-up" fixed-width="true"></ons-icon><span style="vertical-align:middle;">Release to refresh...</span></span>
        <span ng-switch-when="action"><ons-icon size="18px" spin="true" icon="ion-load-c" fixed-width="true"></ons-icon><span style="vertical-align:middle;">Loading...</span></span>
    </span>
</ons-pull-hook>

然后在ons.ready上我添加了：

refreshList = function( e ) {            
    setTimeout( function() { getItems( e ); }, 1000 );            
}

我的函数“getItems”需要回调：

function getItems( callback ) {

    // get some items from api and populate list...

    if ( typeof callback !== "undefined" && typeof callback === "function" ) {
        callback();
    }
}

希望这有帮助。

使用没有AngularJS的ons-pull-hook

2 个答案: