Wepy2.0自定义底部导航栏

新建tab.wpy

<!--components/tab.wpy-->
<!--html-->
<template>
    <view class="tabBarBox">
        <navigator class="itemView" url="{{tabBar[0].pagePath}}">
            <view class="item_text {{tabBar[0].selected ? selected : noSelected}}">{{tabBar[0].text}}11</view>
        </navigator>
        <navigator class="itemView" url="{{tabBar[1].pagePath}}">
            <view class="item_text {{tabBar[1].selected ? selected : noSelected}}">{{tabBar[1].text}}22</view>
        </navigator>
    </view>
</template>

<!--components/tab.wpy-->
<!--script-->
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-->
<template>
     <view id="HomePage">
         <view>
            <!--传入tab组件-->
             <tabBarBottom :tabBar="tabBarData"></tabBarBottom>
         </view>
     </view>
</template>

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

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

     }
})

<!--pages/index.wpy-->
引入tab组件，命名为tabBarBottom
<config>
{
    usingComponents: {
      tabBarBottom: '~@/components/tab',
    }
}
</config>

app.wpy

<!--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;
       }
    }
})

<!--app.wpy-->
<!--配置url，页面在对应pages文件新增-->
<config>
{
    pages: [
      'pages/index',
      'pages/menu/index',
      'pages/main/index'
    ]
}
</config>

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