Ионная проблема прокрутки - перерывы прокрутки страницы при использовании ионного прокрутки

Я довольно новичок в ионной структуре и всей гибридной платформе.Ионная проблема прокрутки - перерывы прокрутки страницы при использовании ионного прокрутки

Я разработал очень простое приложение, используя слишком много учебников по Интернету, и приложение работает отлично, как и ожидалось, кроме домашней страницы.

У меня есть общий просмотр страницы с содержанием ионов, а затем на странице есть несколько ионных прокруток.

Проблема заключается в скроллинг не работает как обычный родной 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>

источник

2015-06-26 Varun Varde

Вы должны убедиться, что вы объявляя высоту и ширину каждого <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> 
Обратите внимание, что это важно, чтобы установить высоту окна прокрутки, а также высоту внутреннего содержания, чтобы дать возможность скроллинга. Это позволяет иметь полный контроль над прокручиваемыми областями.

источник

2015-06-26 16:52:07

Спасибо Зак, так будет ли это решить проблему, когда пользователь не сможет прокручивать страницу, когда они находятся в секции ионного прокрутки? извините, я действительно n00b, может быть, глупый вопрос –

Это предполагаемое поведение; '' переопределяет прокрутку основной страницы, пока она взаимодействует. В этом случае вы хотите, чтобы марка вокруг вашего прокрутки давала вашему пользователю возможность взаимодействовать с базовой страницей и запускать прокрутку базовой страницы. –

Я сделал это изменение, но все еще не работает. Я не могу позволить пользователю взаимодействовать с базовой страницей вместо ионного прокрутки. Я хочу, чтобы пользователь взаимодействовал с Ion-Scroll только тогда, когда пользователь нажал влево или вправо. Мой код находится на github, если вы хотите просмотреть https://github.com/swaraasolutions/VishwaGujaratFinal –

Ионная проблема прокрутки - перерывы прокрутки страницы при использовании ионного прокрутки

ответ

Смежные вопросы