如何使用离子滚动并具有上面的固定内容

Question

如何使用离子滚动并具有上面的固定内容

JD.*_*JD. 9 css angularjs ionic-framework

我有以下观点:

 <ion-view ng-controller="recentDetailCtrl as vm">
   <ion-content  class="has-header">
      <div  style="padding:0px;">
        <my-video  video-url='vm.videoUrl'
           player-width="'100%'" player-height="'180px'"></my-video> 
    </div>
    <ion-scroll>
      <ion-list>
        <ion-item ng-repeat="comment in vm.comments">
                {{comment.text}}

        </ion-item>
      </ion-list>
   </ion-scroll>
  </ion-content>
</ion-view>

Run Code Online (Sandbox Code Playgroud)

我想要的是我的滚动评论列表,但始终固定视频元素(因此它保持在视频下方滚动 - 类似于移动youtube应用程序允许您滚动评论并修复播放视频).

目前,当我滚动视频时,视频会向上移动.

Answer 1

Sta*_*nas 14

你可以使用ion-fixed:(Ionic 3.5.0)

<ion-content no-padding>
  <div ion-fixed class="map"></div>
  <div ion-fixed class="test_class">
    <h4>Bla Bla</h4>
  </div>
  <ion-list>
  <ion-item>
     <p>Test</p>
  </ion-item>
 </ion-list>
</ion-content>

Run Code Online (Sandbox Code Playgroud)

然后在CSS上:

.map {
width: 100%;
overflow: hidden;
height: 30%;
}

.test_class {
width: 100%;
height: 30px;
top: 30%;
}

Run Code Online (Sandbox Code Playgroud)

离子文档还没有参考这个.

这对我来说 100% 有效，谢谢...不知道为什么我花了这么长时间才找到这个！这应该被标记为已批准的答案！ (2认同)

Answer 2

Kev*_*vin 13

将视频指令移出离子内容(离子内容中的所有元素都将滚动).
更改离子含量的css,使其不占据屏幕的上半部分.
添加position:fixed和其他css到您的视频指令,以便它占用屏幕的上半部分.

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>Ionic Fixed Element at Top</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>
  <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Ionic Fixed Element at Top</h1>
    </ion-header-bar>

    <div class="fixed-header my-video">
       My fixed video content
    </div>
    <ion-content class="ion-content-below-my-video">
      <ion-list>
        <ion-item>1</ion-item>
        <ion-item>2</ion-item>
        <ion-item>3</ion-item>
        <ion-item>4</ion-item>
        <ion-item>5</ion-item>
        <ion-item>6</ion-item>
        <ion-item>7</ion-item>
        <ion-item>8</ion-item>
        <ion-item>9</ion-item>
        <ion-item>0</ion-item>
        <ion-item>1</ion-item>
        <ion-item>2</ion-item>
        <ion-item>3</ion-item>
        <ion-item>4</ion-item>
        <ion-item>5</ion-item>
        <ion-item>6</ion-item>
        <ion-item>7</ion-item>
        <ion-item>8</ion-item>
        <ion-item>9</ion-item>
        <ion-item>0</ion-item>
      </ion-list> 
    </ion-content>

  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS:

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

.fixed-header{
  margin-top:43px;
  /* 
   The ionic header bar is 43px in height,
   put your content below the header bar.
  */
}

.platform-webview.platform-ios.platform-cordova .fixed-header{
  margin-top:63px;
  /* On iOS, moving a div out of ion-content,
  I think you need to compensation for the 20px system status bar.
  so it's 43px+20px=63px. but I'm not so sure, it hasn't been tested.
  Test it yourself and make modifications if needed.
  */
}

.my-video
{
  height:200px;
  width:100%;
  position:absolute;
  background:grey;
  color:red;
  text-align:center;
  padding:20px;
}

.ion-content-below-my-video{
  margin-top:200px!important;
}

.platform-webview.platform-ios.platform-cordova .ion-content-below-my-video{
  margin-top:220px;
  /*
  Same as .fixed-header
  */
}

Run Code Online (Sandbox Code Playgroud)

代码笔在这里:

http://codepen.io/KevinWang15/pen/QNJEXX

归档时间：	9 年，6 月前
查看次数：	39604 次
最近记录：	6 年，2 月前