hospital-accompaniment-wechat/components/tabBar/index.vue

<template>
  <view class="tabBar">
    <view v-for="(item,index) in tabBar" :key="item.url" class="tabbar_item" :class="{'active':item.url == currentPage}" @click="navTo(item)">
      <image v-if="item.url == currentPage" :src="item.imgClick" mode=""></image>
      <image v-else :src="item.imgNormal" mode=""></image>
      <view class="text">{{item.text}}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: String,
      default: '/pages/tabBar/home'
    }
  },
  data () {
    return {
      tabBar: [{
        url: '/pages/tabBar/home',
        text: '首页',
        imgNormal: '/static/tabBar/home.png',
        imgClick: '/static/tabBar/home-active.png'
      },
      {
        url: '/pages/tabBar/giftPackageCenter',
        text: '礼包中心',
        imgNormal: '/static/tabBar/giftPackageCenter.png',
        imgClick: '/static/tabBar/giftPackageCenter-active.png'
      },
      {
        url: '/pages/tabBar/order',
        text: '订单',
        imgNormal: '/static/tabBar/order.png',
        imgClick: '/static/tabBar/order-active.png'
      },
      {
        url: '/pages/tabBar/mine',
        text: '我的',
        imgNormal: '/static/tabBar/mine.png',
        imgClick: '/static/tabBar/mine-active.png'
      }]
    };
  },
  created () {
    uni.hideTabBar({})
  },
  computed: {

  },
  methods: {
    navTo (item) {
      if (item.url !== this.currentPage) {
        var isUrl = item.url
        const that = this
        uni.switchTab({
          url: isUrl
        })
      } else {
        // this.$parent.toTop()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
//导航栏设置
$isRadius: 0upx; //左上右上圆角
$isWidth: 100vw; //导航栏宽度
$isBorder: 0px solid white; //边框 不需要则设为0px
$isBg: #ffffff; //背景

// 选中设置
$chooseTextColor: #fb0b03; //选中时字体颜色
$chooseBgColor: transparent; //选中时背景颜色 transparent为透明

//未选中设置
$normalTextColor: #1a1a1a; //未选中颜色
.tabBar {
  width: $isWidth;
  height: 120upx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 998;
  background: $isBg;
  color: $normalTextColor;
  border-left: $isBorder;
  //border-top: 2rpx solid #e4e4e4;
  border-right: $isBorder;
  display: flex;
  justify-content: space-around;
  border-top-right-radius: $isRadius;
  border-top-left-radius: $isRadius;
  box-sizing: border-box;
  overflow: hidden;
  .tabbar_item {
    width: 25%;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-bottom: 14rpx;
    &.active {
      border-left: $isBorder;
      border-top: $isBorder;
      background: $chooseBgColor;
      color: $chooseTextColor;
      font-weight: bold;
    }
  }
  image {
    width: 60rpx;
    height: 60rpx;
    margin-left: 5rpx;
    margin-bottom: 5rpx;
  }
}
</style>