由于之前遇到一个项目使用的ionic中的tabs来做导航条，实际在使用中，总是觉得怪怪的，并且不只是影响到使用效果，更是发生了很多令我费解的问题，由于导航级别太多、分类太复杂，从而导致了tabs的展示令人头痛。不过由于项目已经固化了，没法再进行相应修改和调整，目前也没有重构的打算。也是由于这个一个tabs，当时让我想到了使用Slides组件来打造一个导航条。大家可以先看一下效果：
根据Slides的滑动特性，其实还是可以做出很漂亮的导航效果来，下面直接上代码，如果对slides不是很了解的，可以查看相关官方文档https://ionicframework.com/docs/api/components/slides/Slides/
1、html代码
{{ title }}
{{ 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')
}
});
}
}
}