1. 程式人生 > >mint-ui tabbar切換 ,顯示圖片的辦法

mint-ui tabbar切換 ,顯示圖片的辦法

關於 mintui 切換圖示樣式顯示 ( 僅限於圖片切換!方法很笨 我實在想不出辦法了),查了很多資料,個人感覺太複雜。 不得不吐槽下mintui , 個人感覺框架很不完善 ,要啥沒啥 ! 進入主題 ! 上圖 繼續 完畢

在上下程式碼,直接複製貼上省事!

   <mt-tabbar v-model="tabItemActive"  fixed>
          <mt-tab-item id="pageIndex"    >
            <img slot="icon" src="../../src/image/home.png" v-show="show_img">
            <img slot="icon" src="../../src/image/home1.png"  v-show="img_show" > 
            首頁
          </mt-tab-item>
          <mt-tab-item id="pageProduct"      >
            <img slot="icon" src="../../src/image/shop.png" v-show="show_img1">
            <img slot="icon" src="../../src/image/shop1.png" v-show="img_show1">

            商城
          </mt-tab-item>
          <mt-tab-item id="saoma"     >
            <img  slot="icon" src="../../src/image/sas.png"  v-show="show_img2">
            <img slot="icon" src="../../src/image/sas1.png" v-show="img_show2">

            掃碼付款
          </mt-tab-item>
             <mt-tab-item id="pageArticle"    >
            <img  slot="icon" src="../../src/image/user.png"   v-show="show_img3">
            <img slot="icon" src="../../src/image/user1.png" v-show="img_show3"> 
            個人中心
          </mt-tab-item>
        </mt-tabbar>
        ------------------------------------//分割線
          show_img: true,
      img_show: false,
      show_img1: false,
      img_show1: true,
      show_img2: false,
      img_show2: true,
      show_img3: false,
      img_show3: true,
      /* ------- */
      tabItemActive: "pageIndex",
      -----------------------------------------//在分割
        watch: {
    tabItemActive(val, old) {
      switch (val) {
        case "pageIndex":
          this.show_img = true;
          this.show_img1 = false;
          this.show_img2 = false;
          this.show_img3 = false;
          this.img_show = false;
          this.img_show1 = true;
          this.img_show2 = true;
          this.img_show3 = true;
          break;
        case "pageProduct":
          this.show_img = false;
          this.show_img1 = true;
          this.show_img2 = false;
          this.show_img3 = false;
          this.img_show = true;
          this.img_show1 = false;
          this.img_show2 = true;
          this.img_show3 = true;
          break;
        case "saoma":
          this.show_img = false;
          this.show_img1 = false;
          this.show_img2 = true;
          this.show_img3 = false;
          this.img_show = true;
          this.img_show1 = true;
          this.img_show2 = false;
          this.img_show3 = true;
          break;
        case "pageArticle":
          this.show_img = false;
          this.show_img1 = false;
          this.show_img2 = false;
          this.show_img3 = true;
          this.img_show = true;
          this.img_show1 = true;
          this.img_show2 = true;
          this.img_show3 = false;
          break;
        default:
          break;
      }
    }
  },
  ------------------------------------//完畢
  第一次發部落格 ,有不對之處,還請指正