Ionic3 透明导航栏、渐变导航栏

本文介绍如何使用Ionic框架实现透明导航栏及导航栏渐变效果。通过使用no-border、transparent和fullscreen属性,结合CSS样式调整,可以轻松创建美观的透明导航栏。同时,通过监听滚动事件,动态调整导航栏透明度,实现导航栏从透明到实色的渐变过渡。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在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;
  }

}

具体效果:
这里写图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值