Question

我想在问卷的各个部分之间横向滑动。每个部分都有一个标题和一些已回答的问题。我想在问题上添加垂直滚动，但无法弄清楚如何使其正常工作。以下是我的观点：

  <ion-view title="{{vm.title}}">
    <ion-slide-box show-pager="true" class="has-header">
        <ion-slide ng-repeat="s in vm.sections">
            <ion-item class="item-royal">
                {{s.Heading}}
            </ion-item>
            <ion-scroll>
                <div class="card" ng-repeat="q in s.Questions">
                    <div class="item item-divider">
                        {{q.Text}}
                    </div>
                    <div class="item">
                        {{q.Answer}}
                    </div>
                </div>
            </ion-scroll>
        </ion-slide>
    </ion-slide-box>
</ion-view>

Answer 1

我找到了一个解决方案，解决了我遇到的具体问题，但创建了另一个问题。我在离子滚动中添加了一个div，并在离子滚动和新div上设置了高度：

<ion-scroll style="height:300px">
    <div style="height:100%">
        <div class="card" ng-repeat="q in s.Questions">
            <div class="item item-divider">
                {{q.Text}}
            </div>
            <div class="item">
                {{q.Answer}}
            </div>
        </div>
    </div>
</ion-scroll>

这会导致两个问题：

我不想以像素为单位指定离子滚动的高度 - 我希望它能填充窗口中的剩余空间。
寻呼机出现在滚动窗口的前面 - 我希望它出现在下方。

编辑然后我找到了第二个解决方案：

 <ion-view title="{{vm.title}}">
        <ion-slide-box show-pager="true" class="has-header" 
                       style="position:absolute; bottom: 0;left: 0;right: 0; ">
            <ion-slide ng-repeat="s in vm.sections">
                <ion-item class="item-royal">
                    {{s.Heading}}
                </ion-item>
                <ion-content>
                    <div class="card" ng-repeat="q in s.Questions">
                        <div class="item item-divider">
                            {{q.Text}}
                        </div>
                        <div class="item">
                            {{q.Answer}}
                        </div>
                    </div>
                </ion-content>
            </ion-slide>
        </ion-slide-box>
    </ion-view>

所做的更改

将ion-slide-box的样式设置为position:absolute; bottom: 0;left: 0;right: 0;（顶部已由has-header类指定）
在我想要滚动的部分周围使用离子内容而不是ion-scroll和div
住在前面的寻呼机。它看起来很好！

编辑2 如果您的旧Android设备出现滚动问题，我还建议您使用Crosswalk。

Answer 2

对于离子2，您需要使用<ion-slides>。 <ion-slide-box>已被弃用。

Answer 3

我已经通过简单的CSS解决了这个问题：

离子滑动{高度：初始； }

Answer 4

对于Ionic 4，请使其在某些CSS中垂直滚动。

<ion-slide><div class="scrollVertically">stuff to scroll...</div></ion-slide>

.scrollVertically{
  overflow: auto;
  height: 100vh;
}

如何在离子滑动框中进行垂直滚动

4 个答案: