Ionic2学习笔记--Slide欢迎界面的实现

框架本身有提供slide的控件来实现欢迎界面的效果，下面一起来用一用。

首先新建一个页面:  ionic g page aaa

这样会在aaa文件下生成三个文件

html文件中写布局代码参考如下

<ion-slides pager>
  <ion-slide>
    <img  src="assets/images/guide_1.jpg"/>
  ion-slide>
  <ion-slide>
    <img  src="assets/images/guide_2.jpg"/>
  ion-slide>
  <ion-slide>
    <img  src="assets/images/guide_3.jpg"/>
  ion-slide>
  <ion-slide>
    <img src="assets/images/guide_4.jpg"/>
    <button  id="goHome" light (click)="goToHome()">立即启动button>
  ion-slide>
ion-slides>

这里需要注意的是图片资源的路径问题，我们根据项目的结构可以发现：

我们在assets文件下新建了一个images的文件夹，我将图片都放在这个里面，建议都按照这种方式，这里路径可以相对页面路径，也可以相对项目路径

例如相对页面路径：“../../assets/images/guide1.jpg” 相对项目路径：“assets/images/guide1.jpg”

这里两种方式在浏览器都能显示出图片，但是打包运行在手机是会发现如果写的是相对页面路径图片显示错误，所以我们还是老老实实的使用第二种写法吧！

html里面写完布局然后再ts文件中添加按钮点击事件实现跳转至tab主界面，代码很简单就一句话：

@Component({
  selector: 'page-aaa',
  templateUrl: 'aaa.html',
})
export class Aaa {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
  goToHome(){
    this.navCtrl.setRoot(TabsPage);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Aaa');
  }

}

scss文件添加渲染调整布局：

page-aaa {
  ion-slide {
    background-color: #eeeeee;
  }

  ion-slide img {
    max-height: 100%;
    max-width: 100%;
  }
.slide-zoom{
  position:relative;
}
/*  button{
    position:absolute;
    bottom: 10%;
    left:40%;
    width: 10%;
    display: block;
  }*/
  #goHome{
    position:absolute;
    bottom: 10%;
    left:50%;
    margin-left: -50px;
    width: 100px;
    height: 35px;
    display: block;
  }
}

这里 slide-zoom在浏览器查看可以发现是slide控件定义的类 goHome是我在button中定义的id实现大小控制和居中显示

最后一步就是要去修改程序入口界面的配置了，打开app.component.ts文件

修改rootpage的页面，将之前的TabsPage为slide欢迎界面Aaa。逻辑很简单大家都能懂得

这里什么控制第一次进入之类的方法也很简单截一段代码大家自己去实现吧：