如何使用离子滚动并在上面固定内容 [英] How to scroll with ionic and have fixed content above

查看：27 发布时间：2021/12/15 16:44:47 css angularjs ionic-framework

本文介绍了如何使用离子滚动并在上面固定内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下观点:

 <ion-content class="has-header"><div style="padding:0px;"><my-video video-url='vm.videoUrl'player-width="'100%'" player-height="'180px'"></my-video>

<离子滚动><离子列表><ion-item ng-repeat="comment in vm.comments">{{comment.text}}</ion-item></ion-list></ion-scroll></离子含量></ion-view>

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

目前，当我滚动视频时，视频被向上移出视图.

解决方案

将您的视频指令从 ion-content 中移出(将滚动 ion-content 中的所有元素).
更改 ion-content 的 css，使其不占据屏幕的上半部分.
将 position:fixed 和其他 css 添加到您的视频指令中，使其占据屏幕的上半部分.

HTML:

<头><meta charset="utf-8"><meta name="viewport" content="initial-scale=1，maximum-scale=1，user-scalable=no，width=device-width"><title>顶部的离子固定元素</title><link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"><script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script><body ng-controller="MyCtrl"><ion-header-bar class="bar-positive"><h1 class="title">顶部的离子固定元素</h1></ion-header-bar><div class="fixed-header my-video">我的固定视频内容

<ion-content class="ion-content-below-my-video"><离子列表><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></离子含量>

CSS:

body {光标:url('http://ionicframework.com/img/finger.png')，自动；}.固定头{边距顶部:43px;/*离子标题栏的高度为 43px，将您的内容放在标题栏下方.*/}.platform-webview.platform-ios.platform-cordova .fixed-header{边距顶部:63px；/* 在 iOS 上，将 div 移出离子内容，我认为您需要对 20px 系统状态栏进行补偿.所以它是 43px+20px=63px.但我不太确定，它还没有经过测试.自行测试并在需要时进行修改.*/}.我的视频{高度:200px；宽度:100%；位置:绝对；背景:灰色；红色;文字对齐:居中；填充:20px；}.ion-content-below-my-video{margin-top:200px!important;}.platform-webview.platform-ios.platform-cordova .ion-content-below-my-video{边距顶部:220px；/*与 .fixed-header 相同*/}

这里的代码笔:

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

I have the following view:

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

What I want is my list of comments to scroll but always have the video element fixed (so it stays scrolling below the video - similar to they way the mobile youtube app allows you scroll comments with the playing video fixed).

Currently when I scroll the video is moved up out of view.

解决方案

Move your video directive out of ion-content (all elements in ion-content will be scrolled).
Change the css of ion-content so that it does not occupy the upper half of the screen.
Add position:fixed and other css to your video directive, so that it takes up the upper half of your screen.

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 pen here:

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

这篇关于如何使用离子滚动并在上面固定内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何使用离子滚动并在上面固定内容 [英] How to scroll with ionic and have fixed content above

问题描述

HTML:

CSS:

HTML:

CSS:

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何使用离子滚动并在上面固定内容 [英] How to scroll with ionic and have fixed content above

问题描述

HTML:

CSS:

HTML:

CSS:

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭