吊炸天的uniapp自定义tabbar及初始化方案

2023-06-14 15:24:09

使用 Uniapp 自定义 Tabbar 和解决首次加载闪烁问题

自定义 Tabbar

Uniapp 框架中的原生 Tabbar 功能有限，无法满足所有需求。因此，开发者需要自定义 Tabbar 以获得更多的灵活性。

要实现自定义 Tabbar，需要在 pages.json 文件中添加一个新的页面，并在该页面的 Vue 文件中定义样式和功能。自定义 Tabbar 的代码示例如下：

<template>
  <view class="tabbar">
    <view class="tabbar-item" v-for="(item, index) in tabbarItems" @click="switchTab(index)">
      <image :src="item.icon" class="tabbar-item-icon" />
      <view class="tabbar-item-text">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabbarItems: [
        {
          icon: "path/to/icon1.png",
          text: "首页"
        },
        {
          icon: "path/to/icon2.png",
          text: "消息"
        },
        {
          icon: "path/to/icon3.png",
          text: "我的"
        }
      ]
    }
  },
  methods: {
    switchTab(index) {
      uni.switchTab({
        url: `/pages/index/index?index=${index}`
      })
    }
  }
}
</script>

<style>
.tabbar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #ccc;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.tabbar-item-icon {
  width: 24px;
  height: 24px;
}

.tabbar-item-text {
  font-size: 12px;
  color: #666;
}

.tabbar-item.active {
  color: #333;
}
</style>

解决首次加载闪烁问题

在首次加载切换 Tabbar 页面时，每个页面都会闪烁一下。这是因为 Uniapp 在每次切换页面时都会重新初始化页面。要解决这个问题，可以在 app.vue 文件中添加以下代码：

<script>
export default {
  onShow() {
    if (uni.getStorageSync('firstLoad')) {
      uni.removeStorageSync('firstLoad')
    } else {
      uni.setStorageSync('firstLoad', true)
      this.$router.push('/pages/tabbar')
    }
  }
}
</script>