当水平和垂直滚动时离子无限滚动不起作用

Question

我正在研究一个具有水平滚动页面的离子应用程序。我想使用离子无限滚动来同时进行垂直和水平滚动，但它现在只能用于水平滚动。

任何人都可以模仿，如果我可以在同一页中的水平滚动和垂直滚动无限滚动？

<div> 
      <ion-scroll direction="x" class="con-scroll-x" has-bouncing="true"> 
       <div class="scroll-div"> 
        <div class="scroll-div-item" ng-repeat="trips in globalPlaces.result_trip_search"> 
         <img alt="title" src="img/list-img/1.jpg" /> 
         <div class="scroll-item-caption"> 
          <div class="caption-rect"> 
           <img alt="title" src="img/ic_hiker.png" /> 
           <span>{{ trips.count_ratio }}</span>        
          </div> 
          <div class="scroll-caption-text"> 
           <p>Viaje a:</p> 
           <h3 class="title-break">{{ trips.end_city }}</h3> 
          </div> 
          <div class="scroll-caption-date"> 
           <span>{{ trips.start_date }}</span> <img alt="title" src="img/ic_date.png" /> <span>{{ trips.end_date }}</span> 
          </div> 
         <div class="comm-user-img"> 
          <!-- scroll-cap-user-pics --> 
           <!--<img scroll-cap-user-pics alt="title" src="img/list_user1.png" />--> 
           <img alt="title" src="{{ trips.profile_photo }}" class="comm-global-user-img" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </ion-scroll> 
     </div> 

上面的代码是当我垂直滚动时无限滚动中的一些问题。它在横向上效果很好。

Answer 1

其实是在ionicknow bug，当你在同一个页面的离子不能无限开火负载有ion-scroll和ion-infinite-scroll等。

可能的解决方法

包装你ion-scroll内DIV，并添加ng-if到DIV和控制器设置ng-if模型true。

例

HTML

<div ng-if="PleaseShowMe"> 
    <ion-scroll direction="x" class="con-scroll-x" has-bouncing="true"> 
    <---other code---> 
    </ion-scroll> 
</div> 

控制器

$timeout(function() 
{ 
    $scope.PleaseShowMe = true; 
},50); 

注：即使这样，你不能达到水平滚动，但WH您可以在垂直滚动的同时执行此操作，您可以将数据附加到水平滚动。