- 将视频指令移出离子含量(离子含量中的所有元素都会滚动)。
- 更改离子含量的css,使其不占据屏幕的上半部分。
position:fixed
在您的video指令中添加以及其他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="//pre.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//pre.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-controller="MyCtrl"> <ion-header-bar > <h1 >Ionic Fixed Element at Top</h1> </ion-header-bar> <div > My fixed video content </div> <ion-content > <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; }.platform-webview.platform-ios.platform-cordova .fixed-header{ margin-top:63px; }.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; }代码笔在这里:
http://prepen.io/KevinWang15/pen/QNJEXX



