目录

前言

代码分析

解决问题

修改后的展示 

---

 

前言

 

小僧今天接到的任务是解决一个看起来很简单的小bug。如图，当点击收藏时，把空心的五角星切换成实心的。它的确很简单，不过当我看到代码时，我蒙蔽了。倒不是功能难，是在不大改这段代码的基础上实现功能太麻烦了。

 

 

代码分析

 

我们来看看这块写好的代码是什么样的。首先他用了一个ionic的图标，后台分别写出了已收藏和未收藏两种情况的代码。那已收藏和未收藏在样式上有什么区别呢？style，color=黄色。

小弟才疏学浅，私以为这种方式实现功能无法把黄色的五角星变成实心的，为啥？因为它这个五角星本来就是个大空心，这里所谓的color=黄，只是改变了边框，并不能起到填充的效果。

如何实现效果呢？简单来说，准备两个除填充色外完全相同的五角星图标，该题已收藏显示一种图标，未收藏再显示一种。可问题是这功能写的这么死，怎么拆呢？

<!--判断题-->
 <div class="eee" style=" margin-top: 20%;">
 <span style="margin-left: 65px">
     <ion-icon id="ionic{{i+k}}" *ngIf="is_ionic[j].ionicCollectionA[i].name != 'click'"
 (click)="Collection($event,j, i,question)" [ngStyle]="ionic" name="star-outline"></ion-icon>
     <ion-icon id="ionic{{i+k}}" *ngIf="is_ionic[j].ionicCollectionA[i].name == 'click'"
(click)="Collection1($event,j, i,question)" style="color: rgb(231, 217, 16);font-size:30px"
name="star-outline"></ion-icon>
    <ion-icon [ngStyle]="ionic" name="star-outline"></ion-icon>
    <ion-icon style="color: rgb(231, 217, 16);font-size:30px" name="star-outline"></ion-icon>
</span>
<li style="margin-top:-30px;width: 60px;" class="collection">收藏: </li>

 

 

解决问题

 在不破坏原来方法的基础上，改进方法诞生了~

1.首先我们需要下载两个图标放在指定的目录中，这步骤省略。

2.在代码总体不变的基础上，相比你也可以看到，最重要的就是新图标的样式，摆放的位置怎么和原来的一样。

• 我这里首先把“收藏”这个标签提到了第一行
• 第二，我用两个下载好的图标，不需要<ion-icon>，所有把这个标签换成<div>，然后把这里面的图标属性进行修改和删除，color去掉，name去掉。
• 第三，加<img>标签，这里值得注意的是，标签的几个属性起到的唯一作用就是让图标和收藏在同一行显示，并且位置大小恰到好处。
• 别忘了“收藏”的<li>标签设置float左浮动~

<!--刘桐——收藏图标样式-->
<li style="margin-top:-30px;float: left" class="collection">收藏: </li>
<span >
    <div id="ionic{{i+k}}" *ngIf="is_ionic[j].ionicCollectionA[i].name != 'click'"
(click)="Collection($event,j, i,question)" [ngStyle]="ionic">
    <img [src]="'assets/svg/未收藏五角星.svg'" style="width: 13%;margin-top:-38px;float: left;;margin-left: 40px">
    </div>
    <div id="ionic{{i+k}}" *ngIf="is_ionic[j].ionicCollectionA[i].name == 'click' (click)="Collection1($event,j, i,question)">
    <img [src]="'assets/svg/已收藏五角星.svg'" style="width: 13%;margin-top:-38px;float: left;margin-left: 40px">
    </div>
</span>

 

 

修改后的展示 

 

PS:这样，我们的图标就可以随意定制，随意更改，不用再局限于更换边框喽~