ionic3使用随筆

個人ionic小萌新，就最近用ionic寫的前端頁面遇到的問題進行下總結，友善自己日後檢視，也為大家日後遇到相同問題能給個小小的提示，有什麼不妥的地方還望指教（鞠躬，賣萌^_^）

進入正題

是公司想用ionic重新寫一個app頁面讓我練手，我用的這種寫法按照師傅告訴我的貌似是最新的（原諒我ionic幾我不是很清楚@-@），是以遇到了幾個問題網上找的解決方式都沒用，那些寫法拷過來run的時候都是黑屏，完全顯示不出來，是以隻能研究官網的代碼，具體問題如下：

1、圖檔輪播時想改動底下圓點的樣式：

樣式是ionic自己本身的藍色（active）居中圓點

要改成居右白色（active）圓點

這裡在官網找到slides這個元件，然後在浏覽器裡檢視元素，查找浏覽器解析完後的代碼，找到控制圓點樣式的scss類swiper-pagination和子類.swiper-pagination-bullet-active，然後在自己的scss檔案裡填上如上兩個類，父類裡改位置，子類裡改樣式，如果不放心可以在最後加上！importent

2、然後是内類似于footer的tabs條感覺得菜單欄

因為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

這個的解決方法是

<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="">