UniApp H5 导航栏实现：简单易懂的代码示例

<template>
  <div class='nav'>
    <div class='nav-item' :class='{active: activeIndex === 0}' @click='changeTab(0)'>首页</div>
    <div class='nav-item' :class='{active: activeIndex === 1}' @click='changeTab(1)'>分类</div>
    <div class='nav-item' :class='{active: activeIndex === 2}' @click='changeTab(2)'>购物车</div>
    <div class='nav-item' :class='{active: activeIndex === 3}' @click='changeTab(3)'>我的</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    changeTab(index) {
      this.activeIndex = index
      // 根据 index 切换页面或者执行其他操作
    }
  }
}
</script>
<style scoped>
.nav {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #666;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
}

.nav-item {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.nav-item.active {
  color: #f60;
  border-bottom: 2px solid #f60;
}
</style>
<p>这段代码定义了一个简单的导航栏，包含四个选项卡，点击选项卡时会改变 'activeIndex' 的值，以此来切换选中状态和执行其他操作。选项卡的样式使用了 flex 布局和一些基本的 CSS 样式。</p>