uniapp app自定义底部tabbar

### UniApp 中实现自定义底部 TabBar 的方法 在 UniApp 开发环境中，通过配置 `pages.json` 文件并结合自定义组件的方式可以轻松实现自定义底部 TabBar 功能。以下是具体实现方式： #### 1. 配置 pages.json 首先，在项目的根目录下的 `pages.json` 文件中禁用默认的 tabBar，并设置全局页面路径以便加载自定义组件。 ```json { "globalStyle": { "navigationBarTitleText": "自定义TabBar" }, "tabs": [], "pages": [ { "path": "pages/index/index", "style": { "navigationStyle": "custom" } }, { "path": "pages/home/home", "style": { "navigationStyle": "custom" } }, { "path": "pages/profile/profile", "style": { "navigationStyle": "custom" } } ] } ``` 此部分操作是为了移除默认的 tabBar 并确保每个页面都可以独立显示自定义组件[^1]。 --- #### 2. 创建自定义 TabBar 组件 创建一个新的 Vue 组件文件夹（如 `components/custom-tab-bar/CustomTabBar.vue`），编写如下代码来构建自定义 TabBar： ```vue <template> <view class="tab-bar"> <block v-for="(item, index) in list" :key="index"> <view class="tab-item" @click="switchTab(item.pagePath)" :class="{ active: item.selected }" > <image :src="item.iconPath"></image> <text>{{ item.text }}</text> </view> </block> </view> </template> <script> export default { data() { return { list: [ { pagePath: "/pages/index/index", text: "首页", iconPath: "/static/icons/home.png", selectedIconPath: "/static/icons/home-active.png", selected: true }, { pagePath: "/pages/home/home", text: "发现", iconPath: "/static/icons/discover.png", selectedIconPath: "/static/icons/discover-active.png", selected: false }, { pagePath: "/pages/profile/profile", text: "我的", iconPath: "/static/icons/profile.png", selectedIconPath: "/static/icons/profile-active.png", selected: false } ], currentPath: "" }; }, methods: { switchTab(url) { uni.switchTab({ url }); } }, onLoad(options) { this.currentPath = options.path || ""; this.list.forEach((item) => (item.selected = item.pagePath === this.currentPath)); } }; </script> <style scoped> .tab-bar { display: flex; justify-content: space-around; align-items: center; height: 100px; background-color: white; border-top: 1px solid #ebebeb; } .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; } .active { color: blue; } image { width: 40px; height: 40px; } text { font-size: 12px; } </style> ``` 上述代码实现了动态切换选中的状态以及点击跳转的功能。 --- #### 3. 在页面中引入自定义 TabBar 在需要展示 TabBar 的页面中，例如 `pages/index/index.vue` 或其他页面，修改其结构以包含该组件： ```vue <template> <view class="container"> <!-- 页面主体 --> <scroll-view scroll-y class="page-body"> <view>这里是主页的内容区域。</view> </scroll-view> <!-- 自定义 TabBar --> <custom-tab-bar></custom-tab-bar> </view> </template> <script> import CustomTabBar from "@/components/custom-tab-bar/CustomTabBar"; export default { components: { CustomTabBar, }, }; </script> <style scoped> .container { display: flex; flex-direction: column; height: 100vh; } .page-body { flex: 1; overflow: hidden; } </style> ``` 需要注意的是，如果页面高度被固定为 `100vh` 而未考虑滚动视图，则可能会引发下拉刷新异常行为[^2]。因此建议将内容区单独封装到可滚动容器内。 --- #### 4. 下拉刷新兼容处理 当使用自定义 TabBar 后，某些场景可能触发不合理的下拉刷新逻辑。为了避免这种情况发生，请调整页面布局样式，使主要内容占据剩余空间而非硬编码高度属性。例如，避免直接写入类似 `<view style="height:100vh">...</view>` 这样的静态尺寸设定。 --- ### 总结 以上展示了如何利用 UniApp 提供的强大灵活性来自定义底部 TabBar。这种方法不仅能够满足个性化需求，还支持更复杂的交互设计与扩展能力。