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>
请注意，设置滚动框的高度以及内部内容的高度以启用滚动非常重要。这使得可以完全控制可滚动区域。

离子滚动问题 - 使用离子滚动时页面滚动中断

1 个答案: