天天看点

ionic3使用随笔

个人ionic小萌新,就最近用ionic写的前端页面遇到的问题进行下总结,方便自己日后查看,也为大家日后遇到相同问题能给个小小的提示,有什么不妥的地方还望指教(鞠躬,卖萌^_^)

进入正题

是公司想用ionic重新写一个app页面让我练手,我用的这种写法按照师傅告诉我的貌似是最新的(原谅我ionic几我不是很清楚@-@),所以遇到了几个问题网上找的解决方式都没用,那些写法拷过来run的时候都是黑屏,完全显示不出来,所以只能研究官网的代码,具体问题如下:

1、图片轮播时想改动底下圆点的样式:

样式是ionic自己本身的蓝色(active)居中圆点

ionic3使用随笔

要改成居右白色(active)圆点

这里在官网找到slides这个组件,然后在浏览器里查看元素,查找浏览器解析完后的代码,找到控制圆点样式的scss类swiper-pagination和子类.swiper-pagination-bullet-active,然后在自己的scss文件里填上如上两个类,父类里改位置,子类里改样式,如果不放心可以在最后加上!importent

ionic3使用随笔

2、然后是内类似于footer的tabs条感觉得菜单栏

ionic3使用随笔

因为tab不能在content里用,所以想把tab样式用在content里就得换个方式,肯定有很多方式,小白这里放个自己的解决方式:

<ion-row class="option-box" text-center="">
    <ion-col col-3="" class="sbox" >
      <ion-icon  name="ios-american-football-outline" ></ion-icon>
      <p>你好</p>
    </ion-col>
    <ion-col col-3="" class="sbox">
      <ion-icon name="ios-analytics-outline"></ion-icon>
      <p>很好</p>
    </ion-col>
    <ion-col col-3="" class="sbox">
      <ion-icon name="ios-aperture-outline"></ion-icon>
      <p>好吗</p>
    </ion-col>
    <ion-col col-3=""  class="sbox">
      <ion-icon name="ios-archive-outline"></ion-icon>
      <p>不错</p>
    </ion-col>
  </ion-row>
           

QWQ当时蠢蠢的用了两行row来强行对其,强行上下行,人家标签p能自动换行忘得一干二净,这也算是个记性

3、在card里加上list然后加入输入框,然后在输入框加入放大镜icon

ionic3使用随笔

这个的解决方法是

<ion-card>
    <ion-list>

      <ion-item>
        <ion-input type="text" placeholder="随便输入"></ion-input>
        <ion-icon  name="ios-search" item-end="" ></ion-icon>
      </ion-item>
      </ion-card>
           

就在icon那行加入item-end就可以了~,要是没记错,这个item-end只能在item标签里才有用

4、再记录个图片位置问题,这是之前遇到的,不知道要把图片存在什么地址下,倒腾了很久也找了很多博客啥的,我这里找的办法:自己的工程文件夹\src\assets\自己起的图片文件夹名字(一般都是什么img,image啥的) 。写在工程里就是如下(当时看到还有写全部目录的,但是小白我这里不好使)

5.想让文字居中可以直接在需要的那行加上text-center就好了(单独写样式textalign:center小白我这里是不认QWQ)

<ion-row class="option-box" text-center="">