Vant的Tabbar标签栏引入自定义图标方式

目录
  • Tabbar标签栏引入自定义图标
  • vant自义定Tabbar图标和颜色

Tabbar标签栏引入自定义图标

**使用*van-tabbar*组件**

  • *v-model*绑定的是对应的Tabbar下标
  • *active-color*是未选中的文字颜色
  • *inactive-color*是已选中的文字颜色
  • **route**这个要特别注意,我就是在这踩了坑,我没有加这个参数,但是能正常跳转路由,但是图标选中会出现问题,每次都需要双击。一直以为是插槽的问题,后面才发现官方api的这个参数
*van-tabbar-item*每一个Tab标签
#icons  自定义图标的插槽
props.active   插槽的值,点击后为true,初始为false
<van-tabbar v-model="active" active-color="#42A46F" inactive-color="#999999" @change="onChange" route>
<van-tabbar-item to="/myorder">
                <span>我的预约</span>
                <template #icon="props">
                    <van-image :src="props.active ? require('@mobile/assets/images/index/aftericon1.png') : require('@mobile/assets/images/index/icon1.png')" />
                </template>
            </van-tabbar-item>
</van-tabbar>

vant自义定Tabbar图标和颜色

1.index代码:

<template>
  <div class="app-container">
    <div class="layout-content">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" style="margin-bottom: 50px"/>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" style=" margin-bottom: 50px"/>
    </div>
    <!--    底部导航组件   -->
    <div class="layout-footer">
      <TabBar :data="tabbars" @change="handleChange"/>
    </div>
  </div>
</template>
<script>
import TabBar from '@/components/TabBar'
export default {
  name: 'Home',
  computed: {
    key() {
      return this.$route.path
    }
  },
  data() {
    return {
      pic: '@src/assets/images/home-black.png',
      cachedViews: 'Home',
      tabbars: [
        {
          title: '首页',
          to: {
            name: 'Home'
          },
          normal: require("../../src/assets/images/home_black.png"),
          active: require("../../src/assets/images/home_selected.png")
        },
        {
          title: '模块',
          to: {
            name: 'Model'
          },
          normal: require("../../src/assets/images/model_black.png"),
          active: require("../../src/assets/images/model_selected.png")
        },
        {
          title: '关于我',
          to: {
            name: 'Mine'
          },
          normal: require("../../src/assets/images/mine_black.png"),
          active: require("../../src/assets/images/mine_selected.png")
        }
      ]
    }
  },
  components: {
    TabBar
  },
  methods: {
    handleChange(v) {
      console.log('tab value:', v)
    }
  }
}
</script>

2.TabBar组件代码

<template>
  <div>
    <van-tabbar fixed route v-model="active" @change="handleChange">
      <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
        <span :class="defaultActive === index ? active:''">{{ item.title }}</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? item.active : item.normal">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: 'TabBar',
  props: {
    defaultActive: {
      type: Number,
      default: 0
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      active: this.defaultActive
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('change', value)
    }
  }
}
</script>
<style scoped>
.active_tab img {
  width: 26px;
  height: 26px;
}
/* 自定义选中的颜色 */
.van-tabbar-item--active {
  color: #d81e06;
}
</style>

3.运行效果图

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序自定义tabBar的踩坑实践记录

    微信官方文档对自定义 tabBar 的阐述较为潦草,在开发自定义 tabBar 过程中我踩了很多坑,因此在此处做个总结. 我使用 Vant Weapp作为 UI 组件库,下面以此组件库为例. 定义 tabBar 创建自定义 tabBar 文件 创建一个与 /pages 的同级目录,命名为  /custom-tab-bar,注意目录层级与目录命名问题,不可用其他名称命名. 在 /custom-tab-bar 下创建四个文件: index.js index.json index.wxml index

  • 基于Vue实现自定义组件的方式引入图标

    前言 在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标. 搭建环境 这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用. 安装: npm install --save-dev svg-sprite-loader 配置vue.config.js 在安装svg-sprite-loader后,新建vue.co

  • 在vant 中使用cell组件 定义图标该图片和位置操作

    @本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <div> <van-cell-group class="vanCellGroupClass"><!--../../assets/tou.png--> <!--<van-cell icon="" title="二级经营单位&quo

  • Vant的Tabbar标签栏引入自定义图标方式

    目录 Tabbar标签栏引入自定义图标 vant自义定Tabbar图标和颜色 Tabbar标签栏引入自定义图标 **使用*van-tabbar*组件** *v-model*绑定的是对应的Tabbar下标 *active-color*是未选中的文字颜色 *inactive-color*是已选中的文字颜色 **route**这个要特别注意,我就是在这踩了坑,我没有加这个参数,但是能正常跳转路由,但是图标选中会出现问题,每次都需要双击.一直以为是插槽的问题,后面才发现官方api的这个参数 *van-t

  • 如何将iconfont图标引入到vant的Tabbar标签栏里边

    目录 将iconfont图标引入vant的Tabbar标签栏里 1. 首先引入tabbar 2. 以基础代码为例 vue+vant引入iconfont字体图标 将iconfont图标引入vant的Tabbar标签栏里 vant的Tabbar标签栏https://youzan.github.io/vant/ 在app开发中,这个必不可少,上一张讲了怎么引入iconfont图标,现在就将iconfont图标引入到tabbar标签栏里边,看着vant提供的图标,必将有点丑啊23333,接下来就是引入方

  • 在iview+vue项目中使用自定义icon图标方式

    目录 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库 2. 到购物车中点击添加至项目 3. 给项目起个名字 4. 把下面这些文件放到我的项目的static中 5. 在main.js中全局引入iconfont.css 6. 打开刚才下载好的文件里的demo_index.html 7. 在我的路由中加入icon配置 8. 看结构才发现font-family还是默认的iview设置好的 9. 所以要改变font-family的设置 10. 这样就完美的解决了 最近做一个后台管理系统,是用ivi

  • Vue中引入svg图标的两种方式

    Vue中引入svg图标的方式 Vue中引入svg图标的方式一 安装 yarn add svg-sprite-loader --dev svg组件 index.vue <!-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName&quo

  • buildAdmin开源项目引入四种图标方式详解

    目录 正文 引入Element-Plus图标库 引入Iconfont图标库 引入FontAwesome图标库 引入本地svg图标 正文 在项目开发中,我们经常使用可能都是UI组件库里的图标,当然由于业务需要,可能当前图标库没有我们需要的图标这时候就需要引入其它图标库的图标,比如iconfont.FontAweSome.本地图标库.在了解引入这些图标库之前,我们先学习一下各种图标库的引入使用: Element-Plus:由于elemen官方已经把图标封装成了组件,所以当我们引入图标的时候,需要全局

  • Vue项目中如何引入icon图标

    1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角"IcoMoon App",找到自己需要的图标后选择然后点击右下角"Generate Font",接着可以在左上角第二个按钮"Preferences"进行自定义你要下载的图标信息,一般我都是进去改一下"Font Name",然后返回点击右下角"Do

  • 解决vue 项目引入字体图标报错、不显示等问题

    问题:在项目开发时使用字体图标,发现两个问题: 1.出现报错: 解决方法为:把字体引入方式改为绝对路径 2.不报错,但是不显示图标字体,出现方框 原因可能有两种: ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件(全局引入的话需要从app.vue里引入) ②这个就是我遇到的问题,浪费了我好几分钟!!!微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写. 以上这篇解决vue 项目

  • 在SpringBoot 中从application.yml中获取自定义常量方式

    要注意的地方是 application.yml 中不能用驼峰式写法(systemParams)要改成system-params 方法一: 引入依赖: <!-- 支持 @ConfigurationProperties 注解 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-configuration-processor</a

  • Keras自定义IOU方式

    我就废话不多说了,大家还是直接看代码吧! def iou(y_true, y_pred, label: int): """ Return the Intersection over Union (IoU) for a given label. Args: y_true: the expected y values as a one-hot y_pred: the predicted y values as a one-hot or softmax output label:

随机推荐