zoukankan      html  css  js  c++  java
  • vant Tabbar 标签栏 使用自定义图标

    <van-tabbar active-color="#15975b" inactive-color="#000" v-model="active">
          <van-tabbar-item name="/home" to="/">
            <span>主页</span>
            <img slot="icon" slot-scope="props" :src="props.active ? icon.a_home: icon.nor_home" />
          </van-tabbar-item>
          <van-tabbar-item name="/datas" to="/datas">
            <span>数据</span>
            <img slot="icon" slot-scope="props" :src="props.active ? icon.a_mydatas : icon.nor_mydatas" />
          </van-tabbar-item>
          <van-tabbar-item name="/static" to="/static">
            <span>统计</span>
            <img slot="icon" slot-scope="props" :src="props.active ? icon.a_statis : icon.nor_statis" />
          </van-tabbar-item>
          <van-tabbar-item name="/user" to="/user">
            <span>我的 </span>
            <img slot="icon" slot-scope="props" :src="props.active ? icon.a_user : icon.nor_user" />
          </van-tabbar-item>
        </van-tabbar>
        
        active: "/home",
        //引入自己本地的图片 icon: { a_home: require(
    "@/assets/imgs/ahome.png"), nor_home: require("@/assets/imgs/nhome.png"), a_mydatas: require("@/assets/imgs/adata.png"), nor_mydatas: require("@/assets/imgs/ndatas.png"), a_statis: require("@/assets/imgs/astatic.png"), nor_statis: require("@/assets/imgs/nstatic.png"), a_user: require("@/assets/imgs/auser.png"), nor_user: require("@/assets/imgs/nuser.png"), },
  • 相关阅读:
    模拟--北京标准时间
    DOM方法
    Document-对象属性和常用的对象方法
    struts2标签
    OGNL
    Java基础方面
    初识拦截器
    访问者模式
    备忘录模式
    门面模式
  • 原文地址:https://www.cnblogs.com/lxsunny/p/14575465.html
Copyright © 2011-2022 走看看