ionic3 制作九宫格效果

最新推荐文章于 2020-05-05 12:19:30 发布

ColourfulTiger

最新推荐文章于 2020-05-05 12:19:30 发布

阅读量1.3k

点赞数

分类专栏： ionic与angular 文章标签：九宫格

本文链接：https://blog.csdn.net/colourfultiger/article/details/83150246

版权

本文介绍了如何使用ionic3结合html和scss创建九宫格效果。代码示例包括html的布局设置、scss中图标的样式调整以及ts部分的数据处理。通过添加颜色变量，可以实现不同位置的图标拥有不同颜色，提升视觉效果。九宫格布局在app中常见，用于引导用户执行功能，理解其制作原理对开发者有帮助。

摘要由CSDN通过智能技术生成

我们在app中常会看到一排类似九宫格形式的图标，它们可以引导我们执行自己需要使用的功能，那么这个清新亮丽的九宫格效果是怎样制作出来的呢？接着往下看吧。

代码部分如下：

（1）html部分：

采用的方式结合了ionic与html两种，混合开发。

<ion-content padding>
  <div class="row row-wrap">
    <div class="col col-25 iconBox" *ngFor="let item of items">
      <div class="imgBox">
        <ion-icon [name]="item.icon"  color="primary" class="iconImg"></ion-icon>
      </div>
      <a class="iconTip">{
  {item.tip}}</a>
    </div>
  </div>
  <div class="row row-wrap">
    <div class="col col-25 iconBox" *ngFor="let item of items">
      <div class="imgBox">
        <ion-icon [name]="item.icon"  class="iconImg"></ion-icon>