BRS1.0/components/table/tabler.vue

<template>
  <!-- 底部导航 -->
  <view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
     <view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
        <image class="item-img" :src="item.iconPath" v-if="current == index"></image>
        <image class="item-img1" :src="item.icon" v-else></image>
     </view>
  </view>
</template>

<script>
  export default {
     props: {
        current: String
     },
     data() {
        return {
           paddingBottomHeight: 0, //苹果X以上手机底部适配高度
           list: [{
                 text: '', //首页
                 icon: '/static/tabbar/index.png', //未选中图标
                 iconPath: '/static/tabbar/indexSelected.png', //选中图片
                 path: "/pages/index/indexx", //页面路径
              },
              {
                 text: '', //喜欢
                 icon: '/static/tabbar/like.png',
                 iconPath: '/static/tabbar/likeSelected.png',
                 path: "/pages/like/like/like",
              },
              {
                 text: '', //通知
                 icon: '/static/tabbar/notice.png',
                 iconPath: '/static/tabbar/noticeSelected.png',
                 path: '/pages/notice/notice/notice',
              },
              {
                 text: '', //我的
                 icon: '/static/tabbar/my.png',
                 iconPath: '/static/tabbar/mySelected.png',
                 path: "/pages/my/my/my",
              }
           ]
        };
     },
     created() {
        let that = this;
        uni.getSystemInfo({
           success: function(res) {
              let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
              model.forEach(item => {
                 //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
                 if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
                    that.paddingBottomHeight = 40;
                 }
              })
           }
        });
     },
     watch: {

     },
     methods: {
        tabbarChange(path) {
           uni.switchTab({
              url: path
           })
        }
     }
  };
</script>

<style scoped>
  .tabbarActive {
     color: #79D5AD !important;
  }

  .tabbar {
     position: fixed;
     bottom: 48rpx;
     left: 45rpx;
     right: 30rpx;
     display: flex;
     justify-content: space-around;
     align-items: center;
     width: 600rpx;
     height: 126rpx;
     border-radius: 100rpx;
     background-color: #F5F6F7;
     padding: 0 30rpx;
     z-index: 99;
  }

  .tabbar-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100rpx;
  }
  
  /* 选中后 */
  .item-img {
     width: 104rpx;
     height: 104rpx;
     border-radius: 50%;
     box-shadow: 0rpx 0rpx 10rpx 10rpx #EEEFF0;
  }
  
  /* 选中前 */
  .item-img1 {
     width: 50rpx;
     height: 50rpx;
  }

</style>
————————————————
版权声明：本文为CSDN博主「lmy云棉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43340308/article/details/127055272