资讯专栏INFORMATION COLUMN

来扯点ionic3[4] 结构型指令和列表渲染

lowett / 900人阅读

摘要:雷神上映已经一周,但因为各种原因还没来得去送票房,有多年不见的班纳和洛基娘娘,期待他们在诸神黄昏和明年无限战争中的表现。至此,准备就绪,开始了解第一个指令。参考文档结构型指令

《雷神3》上映已经一周,但因为各种原因还没来得去送票房,有多年不见的班纳和洛基娘娘,期待他们在《诸神黄昏》和明年《无限战争》中的表现。

之前在学习建立页面的时候已经体验过了模板插值(把变量展示在页面中),这一节便来挖掘更多的模板语法。

准备工作

方便起见,我们这次处理项目中的默认页面 ContactPage,在 contact.ts 中建立一个简单的数组成员。

在 contact.html 中清空 ion-content 标签的多余内容。

至此,准备就绪,开始了解第一个指令。

重复性指令 ngFor

ngFor指令的作用是,将批量的数据(数组)结合HTML元素添加到页面DOM中,它的语法参照了ES6中的 for...of 语句:

for (let i of [1,2,3,4,5,6]) { ... }
基本的使用

ngFor指令基本语法:

*ngFor="let value of [1,2,3,4,5,6]"

使用时注意不要遗漏星号(*)。

尝试在 contact.html 中输出 data 数组:


  
{{item}}

模板中渲染的数据和页面类中的属性成员是紧密绑定的,当属性发生变化,页面也会当即作出相应:

ionViewDidEnter(){
      setInterval(()=>{
          this.data.push(this.data.length + 1);
      },500)
  }

在上面的代码中,使用钩子添加了一个间隔定时器,每半秒钟向 data 数组中添加一个元素(*在ionic3中,如果没有特殊的必要,请使用箭头函数代替传统的
function 声明*)。

可见,在页面中,每半秒钟也会相应增加一个新的条目。

对象的渲染

在实际的开发中,我们更常会去处理一个对象数组,这时候我们通过点运算符(.) 输出数组的属性:

    data:any = [
        {name:"托尼·史塔克", birthYear:1970, gender:1, description:"钢铁侠"},
        {name:"史蒂夫·罗杰斯", birthYear:1920, gender:1, description:"美国队长"},
        {name:"娜塔莎罗·曼诺夫", birthYear:1928, gender:0, description:"黑寡妇"},
        {name:"索尔", birthYear:-5555,gender:1, description:"雷神"},
        {name:"克林顿·巴顿", birthYear:1974, gender:1, description:"鹰眼"},
        {name:"布鲁斯·班纳", birthYear:1975, gender:1, description:"绿巨人浩克"}
    ]; 

模板渲染:


  
{{item.name}}

ionic的列表渲染 基本使用

在APP的开发中,对列表条目的渲染并非是通过 div 来承载的,ionic 提供了列表专用的标签 ion-list


  

其中 ion-list 是列表容器, ion-item 是列表中的一个条目,当把 ion-item 和 ngFor 指令结合使用,就可以渲染出一个多条目的列表:


  
    {{item.name}}
  

更复杂一些的列表

ion-item 里可以通过不同元素的组织让列表承载更多信息


  

{{item.name}}

{{item.description}}

此外,ionic还提供一个指令 item-end 将指定的元素渲染在条目的尾部:


      

{{item.name}}

{{item.description}}

{{item.gender?"男":"女"}}, {{2017 - item.birthYear}} 岁

注:漫威电影宇宙中超级英雄的出生年份不可考 :)

此处除了点运算符(.) 输出对象的属性,还使用了一个计算表达式和一个条件表达式,这些都是我们常见的用法。

加入头像

利用 ion-avatar 标签和 item-start 指令渲染一个有头像的列表:

ion-avatar标签的默认样式会自动对图片进行缩放和截取,呈现出如图所示的圆形效果,此外也有一种可以展示方形图片的 ion-thumbnail 标签(缩略图标签),你也可以通过CSS来修改头像的样式。
注:我事先已经准备好了图片素材并将每位hero的avatar属性写进了data中。

有条件地渲染:ngIf 指令

除了 ngFor ,还有一个非常常用的指令 ngIf ,通过一个表达式来判断元素是否会被添加到模板中。这一指令同样也是动态的:当表达式的值变为真,元素便会添加;当表达式的值变为假,元素会从模版中被移除。

*ngIf="isActive"

尝试用 ngIf 指令来晒先男性英雄


    
      
        
          
        
        

{{item.name}}

{{item.description}}

{{item.gender?"男":"女"}}, {{2017 - item.birthYear}} 岁

这儿要说明的是,在angular中,__ngFor 和 ngIf 不能放置在同一个标签上__(Vue之类的框架则可以),因此在 ion-item 外加上一个“虚拟”的标签 ng-container, 它自身不会被渲染到DOM中,只会渲染它包裹的内容(类似Vue中的 template 标签)。因此在没有 ngIf 的情况下,把 ngFor 指令加在 ion-item 上和加在外层的 ng-container 标签上效果是等同的;__而在有 ngIf 指令的情况下,可以通过 ng-container标签避免两个指令的冲突__。

参考文档

Angular结构型指令

Ionic List API Docs

Ionic Item API Docs

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/26136.html

相关文章

  • 扯点ionic3[4] 构型指令列表渲染

    摘要:雷神上映已经一周,但因为各种原因还没来得去送票房,有多年不见的班纳和洛基娘娘,期待他们在诸神黄昏和明年无限战争中的表现。至此,准备就绪,开始了解第一个指令。参考文档结构型指令 showImg(https://segmentfault.com/img/remote/1460000012145196?w=650&h=350); 《雷神3》上映已经一周,但因为各种原因还没来得去送票房,有多年...

    sean 评论0 收藏0
  • 扯点ionic3[5] 轻松上手表单:这些组件可以玩一年

    摘要:基本使用请选择选项选项在标签上使用指令,表示其内部的为同一组。标题按钮按钮和上述控件不同,它不使用来构件,而是使用普通的标签配合指令来实现效果并且按钮可以不放置在容器中。 showImg(https://segmentfault.com/img/remote/1460000012146194?w=650&h=350); 表单几乎是每一个应用程序中必不可少的一部分,在各类 HTML 教材...

    endless_road 评论0 收藏0
  • 扯点ionic3[6] 继续上手表单:魔法般的双向数据绑定

    摘要:其中就是将表单和页面组件绑定在一起的桥梁,当一个表单被绑定到某个属性成员上时,它的就自然等于这个属性的值。 showImg(https://segmentfault.com/img/remote/1460000012146194?w=650&h=350); 相关章节:[来扯点ionic3[5] 轻松上手表单:这些组件可以玩一年](http://www.jianshu.com/p/b2a...

    ermaoL 评论0 收藏0
  • 扯点ionic3[2] 页面一线牵 珍惜这段缘

    摘要:在编译过后,实际上只有一个网页,它是一个单页面应用。所以在移动盛行的今天,单页面应用也是一种大势所趋。 showImg(https://segmentfault.com/img/remote/1460000012145196?w=650&h=350); 上一次我们完成了一个新页面的创建可能你被乱七八糟的概念搞得心烦意乱不过你那么聪明又那么好看我相信你肯定花了点时间就把他们搞懂了 我们先...

    tracymac7 评论0 收藏0
  • 扯点ionic3[0] 吹完牛再入门也不迟

    摘要:让我们上音标第一行是美式音标,大致念法是爱啊尼克嗯这个啊要稍稍拖一下,第二行是英式的念法,大致读爱哦尼克。具体采用哪个,那是我们开发者的自由,说白了就是用两种语气词来感叹我们对尼克的爱慕尼克是谁我不知道啊。 showImg(https://segmentfault.com/img/remote/1460000012135806?w=1240&h=775); 目录 1.序2.ionic的...

    leejan97 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<