ionic2+使用Slides打造漂亮的导航条

2018/07/04ionic 标签:0

由于之前遇到一个项目使用的ionic中的tabs来做导航条,实际在使用中,总是觉得怪怪的,并且不只是影响到使用效果,更是发生了很多令我费解的问题,由于导航级别太多、分类太复杂,从而导致了tabs的展示令人头痛。不过由于项目已经固化了,没法再进行相应修改和调整,目前也没有重构的打算。也是由于这个一个tabs,当时让我想到了使用Slides组件来打造一个导航条。大家可以先看一下效果:

Slides打造手机导航条

Slides打造手机导航条


根据Slides的滑动特性,其实还是可以做出很漂亮的导航效果来,下面直接上代码,如果对slides不是很了解的,可以查看相关官方文档https://ionicframework.com/docs/api/components/slides/Slides/

1、html代码

<ion-header>
  <ion-navbar>
      <div class="slides-header" #sliderHeader>
          <ion-slides #ionSlides>
            <ion-slide *ngFor="let nav of navContent" (click)="ionSlideDidClick(nav.id)">
              <div class="nav-name">{{nav.name}}</div>
            </ion-slide>
          </ion-slides>
      </div>
    </ion-navbar>
</ion-header>
<ion-content padding>
  <h2>{{ title }}</h2>
  <p>
      {{ content }}
  </p>
</ion-content>

2、css代码

page-home {
    .slides-header{
        .slide-zoom{
            font-size: 1.6rem !important;
            .nav-name{
                padding: 8px 5px;
            }
        }
        .active-now{
            color: #038ef9
        }
    }
}

3、typescript代码(采用模拟数据)

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public navContent = [
    {id:1,name:'热点',title:'热点新闻',content:'This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.'},
    {id:2,name:'新闻',title:'国内新闻',content:'在知乎上得知了有这么一个证,然后自己买了相关书籍看了一遍,发现还是学的不… 显示全部 编辑于 2015-08-19 关注问题 78 条评论 感谢 分享 收藏 • 没有'},
    {id:3,name:'推荐',title:'推荐内容',content:'新闻,是指报纸、电台、电视台、互联网等媒体经常使用的记录与传播信息的一种文体。是记录社会、传播信息、反映时代的一种文体。新闻概念有广义与狭义之分'},
    {id:4,name:'图片',title:'图片新闻',content:'江海交汇之处,创新与财富聚集之地。长三角,一个不断扩容的朋友圈,一次又一次给中国和世界带来惊喜。不仅因为庞大的经济体量,还源于用求真务实的态度,解决发展中的难题,将问题变为机遇。'},
    {id:5,name:'软件',title:'软件下载',content:'这件事情重要。数据告诉我们,长三角不仅是“世界第六大城市群”,还是中国甚至全球经济的一个重要引擎。'},
    {id:6,name:'行业',title:'行业新闻',content:'根据2016年公布的《长江三角洲城市群发展规划》,当时定义的长三角包括上海、江苏、浙江和安徽的26个城市:'},
    {id:7,name:'电商',title:'电商行情',content:'截止2018年5月28日,总部位于长三角34个城市的上市公司,总市值已经超过21万亿元人民币。2017财年总营收超过10万亿人民币。'},
    {id:8,name:'视频',title:'视频观看',content:'长三角在全球经济和资本市场的影响力,不仅在于体量庞大,还因为产业链完备。'},
    {id:9,name:'学习',title:'儿童原地',content:'长三角的上市公司,广泛的分布在消费、工业、材料、金融、房地产、信息技术、医疗保健、能源和公用事业等领域。'},
    {id:10,name:'教程',title:'编程教程',content:'经济体量更多代表过去,未来取决于发展,机遇在于解决当前存在的问题。新时代的长三角,正视发展中的问题,在问题中寻找机遇,通过解决问题获得发展动能。'}
  ]
  public content: string
  public title: string
  @ViewChild('ionSlides') slider: Slides;
  @ViewChild('sliderHeader') sliderHeader: ElementRef;

  constructor(
    public navCtrl: NavController,
    public elementRef: ElementRef,
    public renderer: Renderer2
  ) {
   
  }

  ionViewDidLoad(){
    this.slider.freeMode = true
    this.slider.slidesPerView = 7
    this.slider.loop = false
    this.slider.centeredSlides = false
    this.slider.slideToClickedSlide = true
    //此处直接获得当前默认已选中的slider内容与title
    this.content = this.navContent[this.slider.initialSlide].content
    this.title = this.navContent[this.slider.initialSlide].title

    if(this.slider && this.slider.clickedSlide){
      this.ionSlideDidClick(0)
    }else {
      this.sliderDom(1)
    }
  }

  ionSlideDidClick(id){
    this.sliderDom(0)
    this.renderer.setAttribute(this.slider.clickedSlide, 'class', 'swiper-slide active-now')
    if(!id) return
    this.navContent.map(item => {
      if(item.id===id){
        this.content = item.content
        this.title = item.title
      }
    })
  }

  sliderDom(num){
    let allIonSlide = this.sliderHeader.nativeElement.querySelectorAll('ion-slide')
    if(num){
      // allIonSlide[this.slider.initialSlide].style.color = '#038ef9'
      allIonSlide[this.slider.initialSlide].setAttribute('class', 'swiper-slide active-now')
    }else {
      allIonSlide.forEach(element => {
        if(element){
          element.setAttribute('class', 'swiper-slide')
        }
      });
    }
  }

}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

90 + 8 = ?