uniapp工具条

uniapp工具条的基本概念

Uniapp工具条通常指顶部导航栏或自定义底部工具栏，用于实现页面导航、操作按钮等功能。在Uniapp中可通过原生导航栏配置或自定义组件实现。

原生导航栏配置

在pages.json中设置全局或页面级导航栏样式：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#007AFF",
        "navigationBarTextStyle": "white"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8"
  }
}

自定义底部工具栏实现

通过<view>组件结合CSS实现固定定位的底部栏：

<template>
  <view class="toolbar">
    <view class="tool-item" @click="navigateTo('home')">首页</view>
    <view class="tool-item" @click="navigateTo('cart')">购物车</view>
    <view class="tool-item" @click="navigateTo('user')">我的</view>
  </view>
</template>

<style>
.toolbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
}
.tool-item {
  flex: 1;
  text-align: center;
  line-height: 50px;
}
</style>

使用uni-ui组件库

通过官方扩展组件库实现更丰富的工具栏：

1. 安装uni-ui：npm install @dcloudio/uni-ui
2. 使用tabbar组件：

   
   <template>
   <uni-tab-bar
    :tabs="tabs"
    :current="current"
    @change="changeTab"
   />
   </template>

export default { data() { return { current: 0, tabs: [ { text: '首页', icon: 'home' }, { text: '分类', icon: 'grid' }, { text: '我的', icon: 'person' } ] } } } ```

动态修改工具条内容

通过数据绑定实现工具栏动态更新：

export default {
  data() {
    return {
      toolbarItems: [
        { id: 1, text: '刷新', icon: 'refresh' },
        { id: 2, text: '分享', icon: 'share' }
      ]
    }
  },
  methods: {
    updateToolbar() {
      this.toolbarItems.push({ id: 3, text: '新增', icon: 'plus' })
    }
  }
}

多端适配注意事项

1. 在H5端需注意position: fixed的兼容性问题
2. 小程序端导航栏高度需通过uni.getSystemInfoSync()获取状态栏高度
3. APP端可使用原生插件实现更流畅的动画效果
4. 使用条件编译处理平台差异：

   // #ifdef H5
   console.log('H5特有逻辑')
   // #endif