Question

我想创建具有多个水平可滚动图像列表的布局。请检查此笔：

Horizontal Scroll inside vertical Scroll

在上面的布局中，水平和垂直布局都不能同时工作。

当我们点击并按住Ion Header组件时，垂直滚动正在运行，但是如果我们点击Ion-Scroll内的图片，则垂直滚动无效。

我搜索了该问题并遇到了overflow-scroll选项，它允许我们使用原生滚动。

当我设置overflow-scroll=true时，只有垂直滚动正在工作，而如果overflow-scroll=false只有水平工作。

使用overflow-scroll=true在Web浏览器中执行该作业，并且两个滚动都正常工作，但是当在Android设备上运行应用程序时，垂直滚动正在工作。

有没有办法让所有设备都能流畅地进行滚动。

请找到以下代码：

HTML：

            <html ng-app="ionicApp">

        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

            <title>{{myTitle}}</title>

            <link href="http://code.ionicframework.com/1.0.0-beta.2/css/ionic.css" rel="stylesheet">
            <script src="http://code.ionicframework.com/1.0.0-beta.2/js/ionic.bundle.js">
            </script>
        </head>

        <body ng-controller="MyCtrl">
            <ion-header-bar class="bar-positive">
                <h1 class="title">{{myTitle}}</h1>
            </ion-header-bar>

             <ion-content>

                <div class="item item-icon-left item-energized">

                    <h3 class="title ">Header 1</h3>
                </div>
                <ion-scroll direction="x">
                    <div class="row">

                        <ion-item class="card  card col col-33 margin-1 nopad" ng-repeat="img in imgName">
                            <!-- <div class="item item-divider accentback">

                            </div>-->
                            <div class="item item-image">
                                <img class="full-image" ng-src="http://lorempixel.com/400/200/">
                            </div>

                            <div class="item item-divider text-center" style="padding-left:2px;padding-right:2px">
                                <h4>Image {{img}} </h4>
                            </div>
                        </ion-item>
                    </div>
                </ion-scroll>

          <div class="item item-icon-left item-energized">

                    <h3 class="title ">Header 2</h3>
                </div>
                <ion-scroll direction="x" overflow-scroll="false">
                    <div class="row">

                        <ion-item class="card  card col col-33 margin-1 nopad" ng-repeat="img in imgName">
                            <!-- <div class="item item-divider accentback">

                            </div>-->
                            <div class="item item-image">
                                <img class="full-image" ng-src="http://lorempixel.com/400/200/">
                            </div>

                            <div class="item item-divider text-center" style="padding-left:2px;padding-right:2px">
                                <h4>Image {{img}} </h4>
                            </div>
                        </ion-item>
                    </div>
                </ion-scroll>
                 <div class="item item-icon-left item-energized">

                    <h3 class="title ">Header 3</h3>
                </div>
                <ion-scroll direction="x" overflow-scroll="false">
                    <div class="row">

                        <ion-item class="card  card col col-33 margin-1 nopad" ng-repeat="img in imgName">
                            <!-- <div class="item item-divider accentback">

                            </div>-->
                            <div class="item item-image">
                                <img class="full-image" ng-src="http://lorempixel.com/400/200/">
                            </div>

                            <div class="item item-divider text-center" style="padding-left:2px;padding-right:2px">
                                <h4>Image {{img}} </h4>
                            </div>
                        </ion-item>
                    </div>
                </ion-scroll>
         <div class="item item-icon-left item-energized">

                    <h3 class="title ">Header 4</h3>
                </div>
                <ion-scroll direction="x" overflow-scroll="false">
                    <div class="row">

                        <ion-item class="card  card col col-33 margin-1 nopad" ng-repeat="img in imgName">
                            <!-- <div class="item item-divider accentback">

                            </div>-->
                            <div class="item item-image">
                                <img class="full-image" ng-src="http://lorempixel.com/400/200/">
                            </div>

                            <div class="item item-divider text-center" style="padding-left:2px;padding-right:2px">
                                <h4>Image {{img}} </h4>
                            </div>
                        </ion-item>
                    </div>
                </ion-scroll>
            </ion-content>

        </body>

        </html>

CSS：

        body {
      cursor: url('http://ionicframework.com/img/finger.png'), auto;
    }

JS：

        angular.module('ionicApp', ['ionic'])

    .controller('MyCtrl', function($scope) {
      $scope.myTitle = 'ION Image Gallery';
      $scope.imgName=[1,2,3,4,5,6,7,8,9,10];


    });

离线使用垂直滚动不适用于Android 4中的水平滚动

0 个答案: