在ionic中實現透明導航欄非常簡單,主要用到三個屬性:
1、no-border
2、transparent
3、fullscreen
先來看看效果圖:
實現代碼:
<ion-header no-border>//加入no-border讓header無邊框
<ion-navbar transparent>//加入transparent讓header透明
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
<ion-content fullscreen padding>
<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>10</ion-item>
<ion-item>11</ion-item>
<ion-item>12</ion-item>
<ion-item>13</ion-item>
<ion-item>14</ion-item>
<ion-item>15</ion-item>
<ion-item>16</ion-item>
<ion-item>17</ion-item>
<ion-item>18</ion-item>
<ion-item>19</ion-item>
<ion-item>20</ion-item>
</ion-list>
</ion-content>
爲了顯示效果在對應的scss中加入以下樣式:
ion-content {
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507605781398&di=5ecc84b6db4d03e58a73e54d3e8d14ff&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F140221%2F234921-1402210U91038.jpg");
background-position-x: 50%;
background-size: cover;
background-repeat: no-repeat;
}
實現了透明導航欄,同樣就可以實現導航欄的漸變,只需要根據content距離頂部的值,來改變header的opacity即可實現。
//修改頁面代碼爲:
<ion-header no-border>
<ion-navbar color="primary" #header>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
<ion-content fullscreen padding (ionScroll)="scrollEvent($event)">
<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>10</ion-item>
<ion-item>11</ion-item>
<ion-item>12</ion-item>
<ion-item>13</ion-item>
<ion-item>14</ion-item>
<ion-item>15</ion-item>
<ion-item>16</ion-item>
<ion-item>17</ion-item>
<ion-item>18</ion-item>
<ion-item>19</ion-item>
<ion-item>20</ion-item>
</ion-list>
</ion-content>
對應頁面ts代碼爲:
import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
@ViewChild("header") header;
constructor(public navCtrl: NavController) {
}
scrollEvent(e) {
let opacity = (300 - e.scrollTop) / 300;//設置滾動距離300的時候導航欄消失
this.header._elementRef.nativeElement.style.opacity = opacity;
}
}
具體效果: