Question

我的观点如下图所示：

enter image description here

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

我怎么能在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>

`

最重要的部分是离子内容:(溢出 - 滚动='假'滚动=“假”），然后你必须将屏幕拆分为两个部分，第一个我添加一个（我使用'地图-on-top'类）并在其中放置了一张地图。在底部，我用它来提供所需的效果（我使用'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文件中使用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上边距是因为没有它，框会显示在导航栏下方。我希望它也适用于视频容器。

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

2 个答案: