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

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

仍然是先上UI设计图:

image.png

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

一、准备素材:

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

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

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

百度食物图片

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

二、准备数据:

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

{
    "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用来统一管理首页的数据处理方法(这里按页面逻辑来划分的,当然你也可以按业务类型来划分):

ionic g provider home

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

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

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

三、安装视频播放组件

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

四、安装swiper组件

npm install swiper --save

四、实现首页

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

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>的内容更改为下面内容:

<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文件,修改如下:

page-home {
    .swiper-slide img {
        height: 120px;
    }
}

五、微调

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

最后看下实际效果图:

实际效果图

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏较真的前端

十几行代码就可以让你的微信小程序挂掉

mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue修改了 Vue.js 的 runtime 和 compiler...

1412
来自专栏java一日一条

高效Android开发者必须知道的4个工具

移动app开发是一个漫长而费力的过程。然而,现在的企业总是希望能够尽快发布app。幸运的是,我们有很多帮助移动开发人员加快工作步伐的工具。

1221
来自专栏Coding01

推荐一款快速制作通讯录的微信小插件

只要有通讯录的地方,就会需要对通讯录姓名进行分组排序和界面设计,主流做法基本是按照人名的拼音首字母排序,效果图如下:

1762
来自专栏企鹅号快讯

5 款最酷的 Linux 终端模拟器

Xiki 首先我要推荐的第一个终端是 Xiki。 Xiki 是 Craig Muth 的智慧结晶,他是一个天才程序员,也是一个有趣的人(有趣在此处的意思是幽默,...

37910
来自专栏iOS122-移动混合开发研究院

写给iOS小白的MVVM教程(序)

这几天,需要重构下部分代码,这里简要记录下.但是涉及的技术要点还是很多,所以分为多个篇章叙述.此教程来源于,并将于应用于实践,不做过多的概念性阐释和争论.每个篇...

19910
来自专栏更流畅、简洁的软件开发方式

我写项目的步骤。抛砖引玉。

相信各位高手都会有自己习惯或者独特的写项目的方式,不知道是否可以拿出来和大家分享一下。 我先说一下我的,就当作是一块大砖头吧。 1、需求调研、分析 2...

2358
来自专栏java一日一条

高效Android开发者必须知道的4个工具

移动app开发是一个漫长而费力的过程。然而,现在的企业总是希望能够尽快发布app。幸运的是,我们有很多帮助移动开发人员加快工作步伐的工具。

1063
来自专栏CRPER折腾记

React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现

collapsed,onCollapse这些是控制侧边栏缩小的,接受的是外部的props

3393
来自专栏快乐八哥

Angular企业级开发(3)-Angular MVC实现

1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构。MVC模式的目的是实现一种动态的...

2209
来自专栏游戏杂谈

H5小游戏的坑点小结

1) iOS 9.1 的safari中,在onTouchBegan方法中调用cc.audioEngine.playEffect播放音效是没有效果的,如果在onT...

1661

扫码关注云+社区

领取腾讯云代金券