vue移动端使用van-tabbar时出现悬浮效果

最新推荐文章于 2024-07-19 10:38:57 发布

玉青永青

最新推荐文章于 2024-07-19 10:38:57 发布

阅读量754

点赞数

本文链接：https://blog.csdn.net/yuqingyongqing/article/details/131114866

版权

直接上代码

<template>
  <div class="zongbox">
    <router-view />

    <van-tabbar
      v-model="active"
      route
      active-color="#00b578"
      inactive-color="#999999 "
    >
      <van-tabbar-item to="/chongdiazhuang/cdzshouye">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive"   class="shouyeimg" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/chongdiazhuang/agwode">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? iconwode.active : iconwode.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
      icon: {
        active: require("../../assets/cdzimg/22.png"),
        inactive: require("../../assets/cdzimg/23.png"),
      },

      icongouwuche: {
        active: require("../../assets/cdzimg/19.png"),
        inactive: require("../../assets/cdzimg/18.png"),
      },

      iconwode: {
        active: require("../../assets/cdzimg/21.png"),
        inactive: require("../../assets/cdzimg/20.png"),
      },
    };
  },
  computed: {
    ...mapState(["aige"]),
  },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="scss">
.zongbox {
  height: 100%;
  width: 100%;
}
.van-tabbar {
  height: 8%;
}
.shouyeimg {
  height: 1rem;
  width: 1rem;
  // padding: 0.1rem;
  margin-top: -0.65rem;
  z-index: 100000;
  background: #fff;
  border-radius: 1.2rem;
}

[class*="van-hairline"]::after {
  border: none !important;
}
</style>