【问题标题】:Ionic : ion-content + ion-list, how to have static div and scrollable list together?Ionic : ion-content + ion-list,如何同时拥有静态 div 和可滚动列表?
【发布时间】:2015-05-08 06:27:09
【问题描述】:

如下图所示:

我想要视频容器不可滚动(静态),但视频容器下的列表应该是可滚动的。

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

【问题讨论】:

  • 你找到并回答了吗?

标签: html css css-position ionic-framework ionic


【解决方案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' 类)并在其中放置了一张地图。在底部,我使用 来提供所需的效果(我使用“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%;}

【讨论】:

    【解决方案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;
    }
    

    静态内容的 40 像素上边距是因为没有它,框会显示在导航栏下方。我希望它也适用于视频容器。

    【讨论】:

      猜你喜欢
      • 2018-10-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-07-19
      • 1970-01-01
      • 2021-01-08
      相关资源
      最近更新 更多