Css 如何使用ionic滚动并在上面有固定内容
我有以下看法:Css 如何使用ionic滚动并在上面有固定内容,css,angularjs,ionic-framework,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'"
<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>
{{comment.text}
我想要的是我要滚动的评论列表,但始终固定视频元素(因此它保持在视频下方滚动-类似于移动youtube应用程序允许在播放固定视频的情况下滚动评论的方式)
当前,当我滚动视频时,视频会上移到无法观看的位置
position:fixed
和其他css添加到视频指令中,使其占据屏幕的上半部分您可以使用
离子固定
:(离子3.5.0)
爱奥尼亚的文档还没有这方面的参考。现在爱奥尼亚的属性
插槽中有。您可以这样使用它:
这里的爱奥尼亚文档中很快提到了这一点:
在Ionic4中,您可以为
的子级使用slot=“fixed”
属性来实现这一点
检查我有相同的用例。将视频内容从ion内容中移出就成功了。恐慌已经开始……仍然不起作用。我应该加上我的视频元素是iframe(有角度的youtube视频-不确定这是不是导致问题的原因,或者是我的兼职CSS技能造成的)。如果你能提供一个密码笔那就太棒了。谢谢你,凯文,它工作得非常好。非常感谢你的帮助。你可以跳过2。如果你将z-index设置为固定元素,这对我来说是100%有效的,谢谢…不知道为什么我花了这么长时间才找到这个!这应标记为已批准的答案!谢谢这是工作“离子修复”我使用离子5谢谢!这个简单的把戏实际上很有效。。。只需确保没有像我那样在
元素上设置[fullscreen]=“true”
,因为我复制/粘贴了一个示例。。。啊!:-/
<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>
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
*/
}
<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>
.map {
width: 100%;
overflow: hidden;
height: 30%;
}
.test_class {
width: 100%;
height: 30px;
top: 30%;
}