ionic3 制作九宫格效果

我们在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>
      </div>
      <a class="iconTip">{{item.tip}}</a>
    </div>
  </div>

</ion-content>

（2）scss部分：

这部分是使用图标放大后的效果，让图标占满背景，突出不一样的效果。

.iconBox{
    text-align: center;
    .imgBox{
      margin-bottom: 15px;
      .iconImg{
        width: 50px;
        height: 50px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        background: #ffdc34;
        &::before{
          margin-top: 4px;
          color: white;
          zoom: 2;
        }
      }
    }
    a {
      color: #999999;
    }
  }

（3）ts部分：

主要是处理数据，往里面写一些数据，当然也可以用对象的方式的初始化，这样就能将一组数据都封装在一起。

export class HomePage {
  icons: string[];
  tips: string[];
  items: Array<{icon: string,tip:string}>;
  constructor(public navCtrl: NavController,public navParams: NavParams) {
    this.icons = ['flask', 'wifi','american-football', 'boat'];
    this.tips =['电影院','游戏厅','游乐园','网吧'];
    this.items = [];
    for (let i = 0; i < 3; i++) {
      this.items.push({
        icon: this.icons[i],
        tip: this.tips[i]
      });
    }


  }

效果图如下：

颜色虽然单一，但是我们可以自己在添加一个属性，作为颜色变量，然后根据不同的位置，放置不同颜色的属性值，在页面渲染的时候可以根据这个来渲染成更加动人的效果。

在编制这个代码的时候，我才发现，规律就是代码的起点！希望对你们有帮助！

ionic3 制作九宫格效果

猜你喜欢