【uni-app】tabbar自定义

需求

自带的tabbar是无法做成圆角加阴影的，最后的解决方法只能是自定义tabbar。

【uni-app】tabbar自定义

实现

第一步：在page.json中定义两个tab的路径。

"tabBar": {
  "blurEffect":"extralight",
  "color": "#909399",
  "selectedColor": "#18b566",
  "borderStyle": "black",
  "list": [
    {
      "pagePath": "pages/list/list"
    },
    {
      "pagePath": "pages/my/my"
    }
  ]
},

第二步：在components中自定义一个tabbar的组件

  
    
      
      
      {{item.text}}
      {{item.text}}
    
  

 

export default {
    name: "tabbar",
    props: {
      current: Number
    },
    created() {
      uni.hideTabBar() 
    },
    data() {
      return {
        list: [
          {
            selectedIconPath: "../../static/tabbar/list-active.png",
            iconPath: "../../static/tabbar/list.png",
            text: '列表',
            pagePath: "pages/list/list"
          },
          {
            selectedIconPath: "../../static/tabbar/my-active.png",
            iconPath: "../../static/tabbar/my.png",
            text: '我的',
            pagePath: "pages/my/my"
          }
        ],
      }
    },
    methods: {
      changeTab(e) {
        uni.switchTab({
          url: '/' + this.list[e].pagePath,
        })
      }
    }
}

 

  .tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 150upx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-image:url(../../static/tabbar/bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 30rpx 0 0;
  },
  .tabbar-item {
    padding: 0 40rpx;
  }
  .img {
    height: 42upx;
    width: 42upx;
  }
  .text {
    font-size: 23upx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #CACACA;
    line-height: 27upx;
  }
  .text.active {
    color: #409EFE;
  }

第三步：使用tabbar。








import tabbar from '@/components/tabbar/index'
components:{
  tabbar
}

解析

进入页面就隐藏tabbar

created() {
  uni.hideTabBar() 
},

tabbar遮住正常页面，层级又不能高于遮罩层，设置层级99。

.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/3f4e34179e.html

【uni-app】tabbar自定义

需求

实现

解析

相关推荐