【Appetite】ionic3实录（七）次页实现及分析解决问题【上】

最近有点忙，好久没更新了，还好没人催稿，也没人想打我……

这次我们要实现这个页面效果：

image.png

这个页面其实很简单的，唯一有点麻烦的是上面那个轮播图。

现在开始实现这个页面，步骤如下：

一、先创建数据

在src/app/assets/data目录创建dessert-slides.json文件并添加如下内容作为轮播图的数据源：

{
  "success": "true",
  "result": [{
    "src": "../assets/imgs/foods/1.jpg"
  }, {
    "src": "../assets/imgs/foods/2.jpg"
  }, {
    "src": "../assets/imgs/foods/3.jpg"
  }, {
    "src": "../assets/imgs/foods/4.jpg"
  }]
}

同目录下创建dessert-list.json文件并添加如下内容作为甜点列表的数据源：

{
  "success": "true",
  "result": [{
    "title": "DIPPED APRICOTS",
    "desc": "BY RENEE",
    "src": "../assets/imgs/foods/1.jpg"
  }, {
    "title": "DIPPED DESSERT",
    "desc": "BY AMY HINE",
    "src": "../assets/imgs/foods/2.jpg"
  }]
}

二、创建数据服务

执行命令创建数据服务aboutProvider：

ionic g provider about

打开生成的文件并添加如下两个方法：

  /**
   * 获取甜点轮播图片
   */
  getDessertSlides(){
    return this.commonProvider.get("../assets/data/dessert-slides.json", false);
  }

  /**
   * 获取甜点列表
   */
  getDessertList(){
    return this.commonProvider.get("../assets/data/dessert-list.json", false);
  }

三、改造页面

修改about.ts为：

import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';
import { AboutProvider } from '../../providers/about/about';

declare let Swiper: any;

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

  vm: {
    dessertSlides: any[],    //轮播数据源
    dessertList: any[],    //甜点列表数据源
    selectedSegment: string    //segment选择对象
  } = {
    dessertSlides: [],
    dessertList: [],
    selectedSegment: 'one'
  };
  constructor(public navCtrl: NavController, private aboutProvider: AboutProvider, private cd: ChangeDetectorRef) {
  }

  ionViewDidLoad() {
    this.getDessertSlides();
    this.getDessertList();
  }

  /**
   * 获取甜点轮播图片
   */
  getDessertSlides(){
    return this.aboutProvider.getDessertSlides().then((rep: any) => {
      this.vm.dessertSlides = rep.result;
      this.cd.detectChanges();
      this.initSwiper();
      return rep;
    });
  }

  /**
   * 获取甜点列表
   */
  getDessertList(){
    return this.aboutProvider.getDessertList().then((rep: any)=>{
      this.vm.dessertList = rep.result;
      return rep;
    });
  }

  /**
   * 初始化Swiper
   */
  initSwiper() {
    new Swiper('.wheel .swiper-container', {
      slidesPerView: 2,
      initialSlide: 1,
      watchActiveIndex: true,
      centeredSlides: true,
      resizeReInit: true,
      keyboardControl: true,
      grabCursor: true
    });
  }
}

对用于绑定的对象，我一般把它们放在一个叫vm的对象下，便于肉眼区分是绑定对象还是普通变量，这样当看到带vm前缀的变量赋值时，就会想到要刷新页面视图的情况，从而可以做一些相关处理，或避免频繁刷新。

代码应该比较容易理解吧？其中有没有留意到一个细节：initSwiper方法为什么放在获取数据之后？它放在其它地方可以吗？此外，它上面为什么会放个this.cd.detectChanges()？这些合为问题一。

修改about.html为：

  
    
      
         
      
    
    
      RECIPE ARCHIVE
    
    
      
          
      
    
  
  
    
      
        DESSERT
        

      
      
        DRINKS
        

      
      
        EINKORN
        

      
      
        LIFESTYLE
        

      
    
  


  

     
     

      

        

          

            
          
        
      
    
  
    

      
{{item.title}}
      
{{item.desc}}
      
    
  
  
segment二
  
segment三
  
segment四

无论text-center还是padding-left等，用的都是ionic的指令，同样有没有留意到细节：为什么用[hidden]，不用*ngIf或者ngSwitch？此为问题二。

标签内容能否换成注释掉的内容？此为问题三。

修改about.scss为：

.swiper-container {
    width: 100%;
    height: 150px;
    //实现上下红白色各半
    background: linear-gradient(to bottom, color($colors, primary) 50%, color($colors, light) 50%)
  }
  .swiper-wrapper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    height: 100%;
    width: 100%;
  }
  //非激活的图片缩小为0.9倍
  .swiper-slide img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: 2px solid #fff;
    position: relative; 
    //   box-shadow: 0px 2px 5px rgba(0, 0, 0, 1);
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-backface-visibility: hidden;
  }
  //激活的图片恢复为原来的大小
  .swiper-slide-active img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  .swiper-slide .slide-zoom {
    height: 100%;
    padding: 10px 10px 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  } 

其中//的为重要注释，主要是为了实现中间大，两边小的效果。

最后运行看下效果：

运行效果图

问题解释留到下篇再讲，要动动手调试下才能思考下原因。