html - Ionic : ion-content + ion-list, 如何将静态 div 和可滚动列表放在一起？

Question

我的 View 如下图所示:

我希望视频容器不可滚动(静态)，但视频容器下的列表应该是可滚动的。

请问我如何在 Ionic 框架中做到这一点？

我尝试将绝对位置设置为视频容器并将列表放在容器上方。但如果我在列表中滚动，视频也会移动。

非常感谢您的帮助:

模板在这里:

<ion-view title="{{ 'TIMELAPSE_VIDEOS' | translate }}"
          ng-controller="VideoCtrl as controller">
    <ion-nav-buttons side="left">
        <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
      <button ng-click="toggleFullScreen()" menu-toggle="left"
              class="button button-icon icon ion-arrow-expand"></button>
    </ion-nav-buttons>
    <ion-content class="has-header aboutAppContent" >

      <div class="videogular-container">
        <videogular vg-player-ready="controller.onPlayerReady($API)"
                    vg-loop="controller.config.loop"
                    vg-theme="controller.config.theme.url">
          <vg-media vg-src="controller.config.sources"
                    vg-tracks="controller.config.tracks">
          </vg-media>

          <vg-controls>
            <vg-play-pause-button></vg-play-pause-button>
          </vg-controls>

          <vg-buffering></vg-buffering>
          <vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
        </videogular>
      </div>


      <div class="list" id="videoListWrappper">
        <a class="item item-thumbnail-left"
           ng-repeat="timelapseVideo in availableTimelapseVideos">
          <div class="menuItemcircle">
            <div class="menuItemcircleIconBtn">
              <button ng-click="controller.setVideo($index)"  class="button button-icon icon ion-play customIconSound"></button>
            </div>
          </div>
          <h2 class="customHeadingForTrackName">{{timelapseVideo.name}} </h2>
          <h3 class="customHelpText">{{ 'TAP_TO_PLAY_VIDEO' | translate }}</h3>
        </a>
      </div>
      </div>
    </ion-content>
</ion-view>

Answer 1

这是我对这个问题的解决方案。我希望你能帮助别人。

我的 HTML:`

<ion-content overflow-scroll='false' scroll="false">
    <div class="map-on-top">
    <map on-create="mapCreated(map)"></map>
    </div>
    <ion-scroll direction="y" class="list-inferior">
    <ion-list class="list animate-fade-slide-in-right">
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
            <ion-item class="item item-icon-left"
                      href="#">
                <h2 style="color: #000">Titulo</h2>
            <p>Vence <span am-time-ago="2016-12-11"></span></p>
            <i class="icon ion-android-alarm-clock" style="color: #0a9dc7"></i>
                <ion-option-button class="button-positive icon-left ion-edit" ng-click="linkEditReminder(reminder.id)">Editar</ion-option-button>
                <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteReminder(reminder.id)">Eliminar</ion-option-button>
            </ion-item>
        </ion-list>
    </ion-scroll>
</ion-content>
<ion-footer-bar class="bar-assertive">
  <a ng-click="centerOnMe(false)" class="button button-icon icon ion-navigate fontWhite"></a>
</ion-footer-bar>

`

最重要的部分是在ion-content上:(overflow-scroll='false' scroll="false")，然后你必须将屏幕分成两部分，第一部分我添加一个(我使用'map -on-top'类)并在其中放置了一张 map 。在底部，我使用 来提供所需的效果(我使用“底部列表”类)。

和CSS:

.map-on-top {
background-size: cover;
height: 60%;
position: relative;
-webkit-transition: all 1s cubic-bezier(.55,0,.1,1);
transition: all 1s cubic-bezier(.55,0,.1,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
width: 100%;}

.list-on-bottom {height: 40%;}