前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Appetite】ionic3实录(六)首页实现

【Appetite】ionic3实录(六)首页实现

作者头像
IT晴天
发布2018-08-20 10:27:23
1.1K0
发布2018-08-20 10:27:23
举报
文章被收录于专栏:ionic3+

前文再续,书接上一回,上上回说到自定义组件,本节应该讲怎么做自定义组件的同时怎么调用的,只是本实例应做自定义组件的有好几个,不可能每个都写出来讲解,这会显得冗余了,所以决定只把其中一个较有代表性的做成自定义组件。在写这个组件前,我们按照页面的顺序先逐个实现。不知道一个小时能写完不,赶上班…

仍然是先上UI设计图:

image.png

观察之,发布者和内容的文本信息可以用ionic现有的组件实现,而视频播放和图片画廊(如果是轮播图可以用slides组件,它是阉割并封装过的swiper,好像现在这样的效果不能实现)需要使用第三方组件。步骤如下:

一、准备素材:

鸡蛋两只,油两茶匙……呃,说错,应该是这些:

  1. 食物照片;
  2. 人物头像;
  3. 视频封面;
  4. 视频;

这些可以上素材网下,也可以简单点找度娘(不过小心图片版权问题):

百度食物图片

如果是远程地址则先保存地址,如果是放本地的就在src/assets里面找个地方放,呆会要把地址作为数据一部分,我这选择存放本地。

二、准备数据:

我仍是图省事,这里采用本地数据,在src/assets里面新建data文件夹,再在里面建一个friend-news.json文件,为了便于观察,整理了内容如下:

代码语言:javascript
复制
{
    "success": "true",
    "result":[{
        "headImg": "assets/imgs/girl2.jpg",
        "name": "Amy Hinez", "createTime": "May 24,2016", "content": "Some content", "favorites": "1225", "comments": "198",
        "type":"0", 
        "cover": "", 
        "medias":[
            {"id": "1", "src": "../assets/imgs/foods/1.jpg"},
            {"id": "2", "src": "../assets/imgs/foods/2.jpg"},
            {"id": "3", "src": "../assets/imgs/foods/3.jpg"},
            {"id": "4", "src": "../assets/imgs/foods/4.jpg"}
        ]
    },{
        "headImg": "../assets/imgs/girl2.jpg",
        "name": "Amy Hinez", "createTime": "May 24,2016", "content": "Some content", "favorites": "1225", "comments": "198",
        "type":"1", 
        "cover": "../assets/imgs/foods/cover1.jpg", 
        "medias":[
            {"id": "1", "src": "../assets/data/oceans.mp4"}
        ]
    },{
        "headImg": "../assets/imgs/girl2.jpg",
        "name": "Amy Hinez", "createTime": "May 24,2016", "content": "Some content", "favorites": "1225", "comments": "198",
        "type":"0", 
        "cover": "", 
        "medias":[
            {"id": "1", "src": "../assets/imgs/foods/1.jpg"},
            {"id": "2", "src": "../assets/imgs/foods/2.jpg"},
            {"id": "3", "src": "../assets/imgs/foods/3.jpg"},
            {"id": "4", "src": "../assets/imgs/foods/4.jpg"}
        ]
    }]
}

这类似一个服务接口返回来的数据,success属性是为了和上一节的基本网络服务格式一致而设定的属性,type属性为0表示画廊,1为视频,其它的应该从字段名称大致知道是什么东西吧?

接着我们执行命令新建一个HomeProvider用来统一管理首页的数据处理方法(这里按页面逻辑来划分的,当然你也可以按业务类型来划分):

代码语言:javascript
复制
ionic g provider home

命令执行完成,打开文件写入一个方法:

代码语言:javascript
复制
  getFriendNews(){
    //第二个参数为false表示使用相对路径
    return this.commonProvider.get("../assets/data/friend-news.json", false);
  }

最后记得在app.module.ts里面的providers里添加配置它,至此数据就准备好了。

三、安装视频播放组件

用的是videogular2,可参考我另一篇文章:《【技巧】ionic3视频播放》

四、安装swiper组件

代码语言:javascript
复制
npm install swiper --save

四、实现首页

打开home.ts文件,修改内容为:

代码语言:javascript
复制
import { Component, ViewChildren, ChangeDetectorRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomeProvider } from '../../providers/home/home';

import Swiper from 'swiper';

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

  frendNews: any[] = [];
  constructor(public navCtrl: NavController, private cd: ChangeDetectorRef, private homeProvider: HomeProvider) {
  }

  ionViewDidLoad(){
    this.getFriendNews();
  }

  //获取数据
  getFriendNews(){
    this.homeProvider.getFriendNews().then((res: any)=>{
      if(res.success){
        this.frendNews = res.result;
        this.cd.detectChanges();
        this.initSwiper();
      }else{
        //如提示框等错误提示
        console.log(res.msg);
      }
    });
  }

  //初始化Swiper
  initSwiper(){
     new Swiper('.swiper-container', {
        paginationClickable: true,
        slidesPerView:  2,
        width: 280,
        spaceBetween : 10,
        watchActiveIndex: true,
        initialSlide: 0,//初始化显示第几个
        zoom: true,//双击,手势缩放
        loop: false,//循环切换
        lazyLoading: true,//延迟加载
        lazyLoadingOnTransitionStart: true,
        lazyLoadingInPrevNext : true
      });
  }
}

代码看上去长,其实没啥内容,其中图片画廊这个效果有点特别,要显示后一张的一部分,好让别人知道后面还有,所以参数要特别设定下。initSwiper方法貌似要在页面渲染完成后才能使用,而getFriendNews获取数据后未必渲染完成,故不能马上调用,所以调用this.cd.detectChanges()来处理下,关于这个可以查看我另一篇文章。此外getFriendNews没有后续操作,所以异步调用省掉return。

打开home.html文件,把<ion-content>的内容更改为下面内容:

代码语言:javascript
复制
<ion-content>
  <ion-list>
    <div *ngFor="let item of frendNews">
      <!-- 发布人信息 -->
      <ion-item>
        <ion-avatar item-start>
          ![]({{item.headImg}})
        </ion-avatar>
        <h2><strong><span color="dark">{{item.name}}</span></strong></h2>
        <ion-note item-right>{{item.createTime}}</ion-note>
      </ion-item>
      <!-- 视频播放器 -->
      <vg-player class="video-container" *ngIf="item.type == 1; else elseBlock">
        <vg-overlay-play></vg-overlay-play>
        <vg-buffering></vg-buffering>
        <vg-controls>
          <vg-play-pause></vg-play-pause>
          <vg-playback-button></vg-playback-button>

          <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
          <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
          <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
          <vg-mute></vg-mute>
          <vg-volume></vg-volume>
          <vg-fullscreen></vg-fullscreen>
        </vg-controls>
        <video #myMedia [vgMedia]="myMedia" class="video-js vjs-default-skin vjs-fluid" height="400" width="600" preload="auto" poster="{{item.cover}}"
          crossorigin playsinline webkit-playsinline>
          <source *ngFor="let cItem of item.medias" src="{{cItem.src}}" type="video/mp4">
        </video>
      </vg-player>
      <!-- 画廊组件 -->
      <ng-template #elseBlock>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" *ngFor="let cItem of item.medias">
              ![]({{cItem.src}})
            </div>
          </div>
        </div>
      </ng-template>
      <p padding-left padding-right>{{item.content}}</p>
      <!-- 按钮组 -->
      <div class="item-block">
        <div>
          <button ion-button clear icon-left small outline (click)="onTest()">
            <ion-icon name="heart" ></ion-icon>
            <div>{{item.favorites}}</div>
          </button>
          <button ion-button clear icon-left small>
            <ion-icon name="text-outline"></ion-icon>
            <div>{{item.comments}}</div>
          </button>
        </div>
        <button ion-button clear icon-only small item-right>
            <ion-icon name="more"></ion-icon>
        </button>
      </div>
      <!-- 分隔符 -->
      <div class="item-divider-sm"></div>
    </div>
  </ion-list>
</ion-content>

看上去内容也很多,但按注释看每个部分的话就相对好理解些了。用了结构指令ngIf来选择显示视频还是画廊;按钮组可以换用grid布局;此外,为了性能考虑,应用virtualScroll,但我简单一用时布局有变形,赶时间没分析,换用现在方式。

打开home.scss文件,修改如下:

代码语言:javascript
复制
page-home {
    .swiper-slide img {
        height: 120px;
    }
}

五、微调

  1. variables.scss文件修改文字颜色和稍微调大头像:
代码语言:javascript
复制
$list-ios-text-color: color($colors, gray);
$item-ios-avatar-size: 42px;
  1. app.scss里添加分隔栏的样式
代码语言:javascript
复制
.item-divider-sm {
    height: 10px;
    background-color: color($colors, light-gray);
}

最后看下实际效果图:

实际效果图

因为赶着上班,写得有点急,微调没怎么调,特别是swiper的参数配置中的宽高有点诡异,还没摸清,另外说明内容还要补充一下,晚些再完善。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.10.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、准备素材:
  • 二、准备数据:
  • 三、安装视频播放组件
  • 四、安装swiper组件
  • 四、实现首页
  • 五、微调
相关产品与服务
云点播
面向音视频、图片等媒体,提供制作上传、存储、转码、媒体处理、媒体 AI、加速分发播放、版权保护等一体化的高品质媒体服务。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档