给我写小程序底部导航代码

以下是一个小程序底部导航的代码示例：

<view class="tab-bar">
  <view class="tab-item" wx:for="{{tabs}}" wx:key="index" bindtap="switchTab" data-index="{{index}}">
    <image class="tab-icon" src="{{item.icon}}" wx:if="{{currentTab === index}}"></image>
    <image class="tab-icon" src="{{item.inactiveIcon}}" wx:if="{{currentTab !== index}}"></image>
    <text class="tab-title" wx:if="{{currentTab === index}}">{{item.title}}</text>
    <text class="tab-title" wx:if="{{currentTab !== index}}">{{item.inactiveTitle}}</text>
  </view>
</view>

<style>
  .tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100rpx;
    background-color: #fff;
    box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .tab-icon {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 5rpx;
  }

  .tab-title {
    font-size: 24rpx;
    color: #999;
  }

  .tab-title.active {
    color: #333;
  }
</style>

<script>
  Component({
    properties: {
      tabs: {
        type: Array,
        value: []
      },
      currentTab: {
        type: Number,
        value: 0
      }
    },
    methods: {
      switchTab(e) {
        const index = e.currentTarget.dataset.index
        this.triggerEvent('switchTab', { index })
      }
    }
  })
</script>

你可以根据自己的需求修改样式和数据结构。