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

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>

这会导致两个问题:

1. 我不想以像素为单位指定离子滚动的高度 - 我希望它能填充窗口中的剩余空间.

2. 寻呼机出现在滚动窗口的前面 - 我希望它出现在下面.

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

 <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>

做出了改变

1. 设置ion-slide-boxto 的样式position:absolute; bottom: 0;left: 0;right: 0;(顶部已经由has-header类指定)

2. 在我要滚动的部分周围使用离子含量而不是ion-scroll和div

3. 住在前面的寻呼机.看起来很好!

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