web-dev-qa-db-fra.com

Comment faire défiler avec ionic et avoir un contenu fixe ci-dessus

J'ai la vue suivante:

 <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>

Ce que je veux, c'est que ma liste de commentaires défile, mais que l'élément vidéo soit toujours fixe (donc il continue de défiler en dessous de la vidéo - de la même manière que l'application mobile youtube vous permet de faire défiler les commentaires avec la vidéo en cours de lecture fixée).

Actuellement, lorsque je fais défiler, la vidéo est déplacée hors de la vue.

cssangularjsionic-framework
9
JD.
  1. Déplacez votre directive vidéo hors du contenu ionique (tous les éléments du contenu ionique défileront).
  2. Modifiez le CSS du contenu ionique afin qu'il n'occupe pas la moitié supérieure de l'écran.
  3. Ajouter position:fixed et d'autres CSS à votre directive vidéo, afin qu'elle occupe la moitié supérieure de votre écran.

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>

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
  */
}

Code stylo ici:

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

13
Kevin

Vous pouvez utiliser 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>

Puis sur css:

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

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

La documentation ionique n'a pas encore de référence sur celui-ci.

14
Stathis Ntonas

Il y a maintenant dans Ionic attribut slot. Vous pouvez l'utiliser comme ça:

<my-video slot="fixed"></my-video>

Il est brièvement mentionné dans la documentation Ionic ici:
https://ionicframework.com/docs/api/content#slots

1
maczos

Dans Ionic4, vous pouvez utiliser le slot="fixed" propriété pour les enfants de <ion-content> pour y parvenir.

Vérifiez le docs

0
M.M