This is the best way to customize the bottom navigation bar in UNI-App that I have found so far. The other methods have the disadvantage of either blinking during switching or requesting data with every click. If there is a better way, please feel free to leave a comment. I just started writing projects with UNI-app recently and just looked at the documentation.

1. The tabbar component

<template> <view class="tabbar-container"> <view :style="{ color: currentIndex == index ? '#007EFF' : '#333333' }" v-for="(item, index) in tabbarList" :key="index" style="flex: 1" @click="switchTab(index)" > <view :class="'iconfont ' + item.icon" /> <view class="title">{{ item.title }}</view> </view> </view> </template> mounted(){ let dom = uni.createSelectorQuery().select('.tabbar-container') Dom.boundingclientrect (e => {// tabbarHeight is used more often, GetApp ().globaldata.tabbarheight = e.eight}).exec()} <style scoped lang=" SCSS ">.iconfont {font-size: 16px; 18px; } .tabbar-container { display: flex; justify-content: space-evenly; text-align: center; padding: 10px 0; background-color: #fff; Box-shadow: 0-1.5px 3px #eee; z-index: 999; .title { font-size: 12px; } } </style>Copy the code

2. The introduction of

Swiper is used here, duration is 0 to turn off the page switch animation,

<template>
  <view :style="'height: calc(100vh - ' + tabbarHeight + 'px)'">
    <tab-bar
      :currentIndex="currentIndex"
      class="tabbar-container"
      @getCurrentIndex="getCurrentIndex"
    />
    <swiper duration="0" disable-touch :current="currentIndex" style="height: 100%">
      <swiper-item>
        <scroll-view scroll-y style="height: 100%">
          <home />
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <todo-page />
      </swiper-item>
      <swiper-item>
        <launch-task />
      </swiper-item>
      <swiper-item>
        <my-page />
      </swiper-item>
    </swiper>
  </view>
</template>

mounted() {
  this.tabbarHeight = getApp().globalData.tabbarHeight
},

getCurrentIndex(e) {
  this.currentIndex = e;
}
Copy the code