離子：離子含量+離子列表，如何同時具有靜態div和可滾動列表？

Question

我在下面的圖片上有這樣的看法：

我希望視頻容器不可滾動（靜態），但視頻容器下的列表應可滾動。

我該如何在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>

`

最重要的部分是離子含量：（overflow-scroll ='false'scroll =“ false”），然后您必須將屏幕分成兩部分，第一部分添加一個（我使用“ map-on-頂級”），並在其中放置地圖。 在底部，我使用給出了想要的效果（我使用了“ list-on-bottom”類）。

和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%;}

Answer 2

我只是遇到了同樣的問題，但是沒有視頻容器，而是有一個搜索框。

我這樣解決，模板：

<ion-view hide-back-button="true" view-title="Buzón de Mensajes" class="buzon-page">
  <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-android-exit" ng-click="cerrarSesion()">
    </button>
  </ion-nav-buttons>

  <!-- non scrollable (static) search box -->
  <div class="list list-inset" >
    <label class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Buscar">
    </label>
  </div>

  <!-- scrollable (dynamic) list -->
  <ion-content class="ionc">
    <ion-list>
      <ion-item ng-repeat="mensaje in mensajes" class="item" ng-click="abrirMensaje($index)" on-hold="mostrarMenu(mensaje, $index)">
        <h2><b>{{ mensaje.hid }}</b></h2>
        <h3>{{ mensaje.alert }}</h3>
        <p class="cont">{{ mensaje.mens }}</p>
        <p class="fecha">{{ mensaje.fecha }}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

以及style.css文件中的de CSS：

/* non scrollable (static) search box */
.buzon-page label{
  margin-top: 40px;
  border:2px solid #C0C0C0;
}

/* scrollable (dynamic) list */
.buzon-page .ionc{
  margin-top: 80px;
}

靜態內容的40px上邊距是因為沒有它，該框將顯示在導航欄下方。 我希望它也可以與視頻容器一起使用。