微信小程序 实现底部导航栏

效果：

html:

<template>        
  <footer class="navigaion" >
    <ul class="ul_nav">
      <li class="li_nav" v-for="(item,index) in tabBar.list" :key="item.text" 
        :style='select==index? "color:"+tabBar.selectedColor : "color:"+tabBar.color'  @click="clickIndex(index)">
        <navigator :url="item.pagePath" open-type="redirect">
          <img :src="select==index?item.selectedIconPath:item.iconPath" alt="">
          <div class="nav_title">{{item.text}}</div>
          </navigator>
      </li>
    </ul>
  </footer>
</template>

js:

<script>
export default {
  data: () => {
    return {
      select: global.app.currentMenu;
      tabBar: {
          color: "#a9b7b7", //未选择时 底部导航文字的颜色
          selectedColor: "blue", //选择时 底部导航文字的颜色
          borderStyle: "white", //底部导航边框的样色
          backgroundColor:'#fff',
          list: [
            {
              selectedIconPath: "/static/images/home1.png", //选中时 图标路径
              iconPath: "/static/images/home.png", //未选择时 图标路径
              pagePath: "pages/index/main", //页面访问地址
              text: "发现"
            },
            {
              selectedIconPath: "/static/images/read1.png",
              iconPath: "/static/images/read.png",
              pagePath: "pages/detail/main",
              text: "阅读"
            },
            {
              selectedIconPath: "/static/images/mine1.png",
              iconPath: "/static/images/mine.png",
              pagePath: "pages/setting/main",
              text: "我的"
            }
          ]
}
    };
  },
  methods: {
    clickIndex(i) {
      // this.select = i;
      this.select = global.app.currentMenu;
    }
  },
  //用户退出页面时发生
  onUnload() {
    select: 0;
  },
  onShow() {
    select: 0;
  }
};
</script>

css:

<style scope>
.navigaion {
  position: fixed;
  z-index: 801;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background: #fff;
  /* border-top: 1px solid #d9d9d9; */
}
.ul_nav {
  height: 100rpx;
  width: 100%;
  display: flex;
}
.li_nav {
  flex: 1;
  height: 100%;
  float: left;
  width: 33%;
  text-align: center;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.li_nav a {
  flex: 1;
  height: 100%;
}
.li_nav img {
  width: 60rpx;
  height: 60rpx;
}
.nav_title {
  font-size: 24rpx;
}
</style>