離子滾動問題 - 使用離子滾動時頁面滾動中斷

Question

我對離子框架和整個混合平臺相當陌生。

我已經開發了一個非常簡單的應用程序，通過在互聯網上使用太多的教程和應用程序正常工作完美，除了主頁。

我有一個整體頁面視圖，它有一個離子內容，然後在頁面上有多個離子滾動。

問題是滾動不作爲正常的原生Android/iOS應用程序

任何人都可以在這方面幫助工作。

附在下面是完整的代碼

<ion-view ng-init="LoadPage()"> 
<ion-content ng-show="contentloading" scroll="true"> 
    <ion-refresher pulling-text="Pull to refresh" on-refresh="LoadPage()" > 
    </ion-refresher> 
    <div class="row-no-padding"> 
     <div class="row row-no-padding row-center" style="padding-left: 5px;"> 
      <div class="col-33 col-center"> 
       <h5 class="latest-news headingStyle" data-fittext data-fittext-max="12px">Latest News</h5> 
      </div> 
      <div class="col col-center"> 
       <ion-slide-box does-continue="true" auto-play="true" show-pager="false"> 
        <ion-slide ng-repeat="item in Slides" ng-click="GoToPost({{item.id}})"> 
         <h4 class="{{FontDetails(1)}}" style="margin-left: 5px;word-break: break-all;white-space:nowrap;overflow:hidden; color:#bb1515;font-size:12px;" ng-bind-html="item.title | unsafe"></h4> 
        </ion-slide> 
       </ion-slide-box> 
      </div> 
     </div> 
    </div> 
    <div class="row-no-padding"> 
     <ion-slide-box does-continue="true" auto-play="true" show-pager="false"> 
      <ion-slide ng-repeat="item in Slides" ng-click="GoToPost({{item.id}})"> 
       <div class="row-wrap"> 
        <div class="col" style="background: url({{item.thumbnail_images.medium.url}}) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;background-size: cover;min-height: 200px;height:250px;max-height:300px;z-index: 1;"> 
        </div> 
        <div style="background:black;position:absolute;opacity: 0.5;filter: alpha(opacity=50);height:auto;bottom:0%;width: 100%;overflow:hidden;z-index:2; vertical-align: top;" class="col"> 
         <h4 class="latest-news-add {{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h4> 
        </div> 
       </div> 
      </ion-slide> 
     </ion-slide-box> 
    </div> 
    <!--   </div> 
      </div>--> 
    <div class="row-no-padding"> 
     <div class="row row-no-padding" style="padding: 5px;"> 
      <div class="col col-33 col-center"> 
       <h5 class="latest-news categoryHeading {{FontDetails(1)}}">{{'Gujarat'| translate}}</h5> 
      </div> 
     </div> 



     <div class="row row-no-padding" style="padding: 5px; overflow: auto;white-space: nowrap; overflow-y: scroll; position: relative;"> 
      <div class="col" > 
       <ion-scroll direction="x" scroll-outside="true" class="wide-as-needed"> 

        <span> 
         <span class="wrapperhome" ng-repeat="item in gujarat"> 
          <img on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()" ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/> 
          <div> 
           <h6 class="{{FontDetails(1, 0)}}" ng-bind-html="item.title | unsafe"></h6> 
          </div> 
         </span> 
        </span> 

       </ion-scroll> 
      </div> 
      <!--<div class="col">--> 

     </div> 
     <div class="row row-no-padding" style="padding: 5px;"> 
      <div class="col col-33 col-center"> 
       <h5 class="latest-news categoryHeading {{FontDetails(1)}}">{{'Politics'| translate}}</h5> 
      </div> 
     </div> 
     <div class="row row-no-padding" style="padding: 5px;"> 
      <div class="col"> 
       <ion-scroll direction="x" class="wide-as-needed"> 
        <span> 
         <span class="wrapperhome" ng-repeat="item in politics"> 
          <img ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/> 
          <div> 
           <h6 class = "{{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h6> 
          </div> 
         </span> 
        </span>      
       </ion-scroll> 
      </div> 
     </div> 
     <div class="row row-no-padding" style="padding: 5px;"> 
      <!--    <div class="col col-34" style="text-align: center;margin-bottom: 10px;background-color: firebrick;vertical-align: middle;text-align: center;color:white;font-family: HouseGothicHG23Text-Bold;font-size:1.30em;"> 
           Technology 
          </div>--> 
      <div class="col col-center"> 
       <h5 class="latest-news {{FontDetails(1)}} categoryHeading ">{{'Technology'| translate}}</h5> 
      </div> 

     </div> 
     <div class="row row-no-padding" style="padding: 5px;"> 
      <div class="col"> 
       <ion-scroll direction="x" class="wide-as-needed"> 
        <span> 
         <span class="wrapperhome" ng-repeat="item in technology"> 
          <img ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/> 
          <div> 
           <h6 class = "{{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h6> 
          </div> 
         </span> 
        </span>      
       </ion-scroll> 
      </div> 
     </div> 
    </div> 
    <div class="row row-no-padding" style="padding: 5px;"> 
     <div class="col"> 
      <ion-list> 
       <div ng-repeat="item in FooterItems" ng-if="(item.MenuOption !== 'Home' || item.MenuOption !== 'Favorite')" style="margin-bottom: 10px;"> 
        <ion-item style="border: 0px!important;" class="item-stable item item-icon-left home-item-footer item-icon-right {{FontDetails(1)}}" ng-click="toggleGroup({{item.group}},'{{item.link}}')" ng-class="{active: isGroupShown({{item.group}})}"> 
         <i class="icon"><img src="img/{{item.link}}.png" style="width:20px;height:20px;"/></i> 
         {{item.MenuOption| unsafe | translate}} 
         <i ng-class="isGroupShown({{item.group}}) ? 'ion-chevron-down' : 'ion - chevron - right'" class="icon" style="font-size:1em;"></i> 
        </ion-item> 
        <ion-item class="item-accordion" ng-show="isGroupShown({{item.group}})" style="padding-left:1px;padding-top:1px!important"> 
         <!--       <div class="row row-no-padding"> 
                 <div class="col"> 
                  <ion-scroll direction="x" class="wide-as-needed"> 
                   <span> 
                    <span class="wrapper" 
                    ng-repeat="categoryitem in item.items"> 
                     <img ng-src="{{categoryitem.thumbnail_images.medium.url}}" ng-click="GoToPost({{categoryitem.id}})" width="150px" height="150px"/> 
                     <div> 
                      <h6 class = "{{FontDetails(0)}}" ng-bind-html="categoryitem.title | unsafe"></h6> 
                     </div> 
                    </span> 
                   </span>      
                  </ion-scroll> 
                 </div> 
                </div>--> 
         <div class="row row-no-padding" style="padding: 5px;"> 
          <div class="col"> 
           <ion-scroll direction="x" class="wide-as-needed"> 
            <span> 
             <span class="wrapperhome" ng-repeat="categoryitem in item.items"> 
              <img ng-src="{{categoryitem.thumbnail_images.medium.url}}" ng-click="GoToPost({{categoryitem.id}})" width="150px" height="150px"/> 
              <div> 
               <h6 class = "{{FontDetails(1)}}" ng-bind-html="categoryitem.title | unsafe"></h6> 
              </div> 
             </span> 
            </span>      
           </ion-scroll> 
          </div> 
         </div> 
        </ion-item> 
       </div> 
      </ion-list> 
     </div> 
    </div> 






</ion-content> 

Answer 1

你需要確保你宣佈你滾動每個<div>的高度和寬度。從the ion-scroll docs：

基本用法：

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> 
    <div style="width: 5000px; height: 5000px; 
     background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"> 
    </div> 
</ion-scroll> 

注意，它設置滾動框的高度以及內部的內容，使滾動的高度是很重要的。這使得可以完全控制可滾動區域。