首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >ion-side-menu内的ion-无限滚动

ion-side-menu内的ion-无限滚动
EN

Stack Overflow用户
提问于 2016-01-04 23:10:14
回答 1查看 249关注 0票数 2

我正在尝试使用离子侧菜单中的离子无限滚动,fetch more函数没有被调用。

是否可以在ion-side菜单中使用ion-infinite-scroll?

我添加了该指令,但未调用"loadMore()“方法。

这是我使用的代码行:

代码语言:javascript
运行
复制
<ion-infinite-scroll on-infinite="loadMore()" ng-if="true" distance="10%"></ion-infinite-scroll>

这是loadMore()方法:

代码语言:javascript
运行
复制
$scope.loadMore = function() {
  console.log("showMore");
};

完整的html是:

代码语言:javascript
运行
复制
<ion-side-menus enable-menu-with-back-views="true" cache-view="false">
  <ion-side-menu-content ng-class="{'opaque-content' : isMenuOpen}">
    <ion-nav-bar class="bar-stable">

      <ion-nav-buttons side="left">
        <button class="button button-icon" menu-toggle="left">
          <img class="menu-icon" src="img/menu-icon.png" />
        </button>
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <div class="button-icon">
          <img ng-show="showUserImage" class="default-channel-image" src="img/default-channel.png" />
          <img ng-show="showAnonymouseChannel" class="discussion-title-image img-border" src="img/anonymous-icon.png" />
        </div>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left" width="320">
    <ion-header-bar class="bar-stable menu-background">
      <a class="setting-icon-wrapper" href="#/app/preferences" menu-close>
        <img class="settings-icon" src="img/settings.png" />
      </a>
      <form class="search-input-wrapper" ng-submit="search(discussionFilter.data)">
        <input type="text" id="searchFilter" class="search-input" ng-model="discussionFilter.data"  placeholder="Find channels..." ng-change="changeSearch(discussionFilter.data)" ng-model-options='{ debounce: 1000 }'/>
        <div ng-hide="discussionFilter.data != null && discussionFilter.data != ''"  class="search-icon-wrapper" ng-click="search(discussionFilter.data)">
          <i class="fa fa-search fa-2 search-icon"></i>
        </div>
        <div ng-show="discussionFilter.data != null && discussionFilter.data != ''" class="clear-search" data-ng-click="discussionFilter.data = '';search(discussionFilter.data)">
          <img src="img/clear-results.png" class="clear-results">
          </div>

      </form>

    </ion-header-bar>
    <ion-header-bar class="bar-subheader channels-header short-header" ng-show="discussions.length > 0" ng-class="">
      <div class="list-items-header channels-header" ng-show="discussions.length > 0">
        <p class="list-header-title">CHANNELS</p>
        <div class="create-channel-area" ng-click="MoveToNewChannel()" menu-close>
          <img class="plus-icon" src="img/plus-button.png"/>
        </div>
      </div>
    </ion-header-bar>
    <ion-content class="channel-headers menu-background" ng-show="discussions.length > 0" ng-click="closeKeyboard()">
      <ion-list class="menu-background menu-list" ng-click="closeKeyboard()">
        <ion-item class="menu-background"  menu-close ng-href="#/app/discussion/{{discussion.id}}" ng-click="closeKeyboard()" ng-repeat="discussion in discussions">

          <div class="menu-channel-text" ng-class="{'subject-regular' : discussion.read}"> {{discussion.subject | truncate_word:18}} </div>
        </ion-item>

      </ion-list>
      <!--<ion-infinite-scroll on-infinite="loadMore()" immediate-check="false" ng-if="isMenuOpen && showMoreDiscussions" distance="10%"></ion-infinite-scroll>-->
    </ion-content>


  </ion-side-menu>
</ion-side-menus>
EN

回答 1

Stack Overflow用户

发布于 2016-01-05 05:03:47

解决方案是:

添加了$scope.$broadcast('scroll.infiniteScrollComplete'); to the end of my loadMore function.

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34594130

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档