Wepy2.0自定义底部导航栏

新建tab.wpy

import wepy from "@wepy/core";
wepy.component({
    props:{
        tabBar:Object
    },
    
})

components/tab.wpy css lang='scss'
  .tabBarBox{
        width: 100%;
        height: 100rpx;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        z-index: 9999;
        border-top: 1px #afafaf solid;
         .itemView{
            width: 150rpx;
            height: 100rpx;
            text-align: center;
            display: inline-block;
            padding-top: 6rpx;
            .item_text{
                font-size: 28rpx;
            }
        }
    }

Pages/index.wpy

pages/index.wpy JS:
import wepy from "@wepy/core";

wepy.page({
    data:{
        tabBarData: {},
    },
    onLoad() {
　　　　//获取数据,更新数据  tabBarClickHandle()启动文件中编写的---- 0就是形参id的实参
        this.tabBarData = this.$app.tabBarClickHandle(0, this);

     }
})

引入tab组件，命名为tabBarBottom

{
    usingComponents: {
      tabBarBottom: '~@/components/tab',
    }
}

app.wpy

wepy.app({
    globalData: {
        userInfo: null,
        //定义导航栏信息
        tabBar:{
          list:[
            {
              pagePath:"/pages/menu/index",
              text:"菜单",
              selected:true
            },
            {
              pagePath:"/pages/main/index",
              text:"我的",
              selected:false
            }
          ]
        }
    },
    methods：{
        //导航方法
        tabBarClickHandle(id, that) {
           let tbList = this.$options.globalData.tabBar.list;
           tbList.forEach((item, index) => {
               if (id == index) {
                   tbList[id].selected = true;
               } else {
                   tbList[index].selected = false;
               }
           });
           return this.$options.globalData.tabBar.list;
       }
    }
})

{
    pages: [
      'pages/index',
      'pages/menu/index',
      'pages/main/index'
    ]
}

本文参考：https://www.bbsmax.com/A/amd0...