uniapp顶部导航栏

<template>
  <view class="container">
    <!-- 导航栏 -->
    <view class="navbar">
      <view :class="['nav-item', { 'active': activeTab === 'hot' }]" @tap="changeTab('hot')">
        <text>热门</text>
      </view>
      <view :class="['nav-item', { 'active': activeTab === 'recommend' }]" @tap="changeTab('recommend')">
        <text>推荐</text>
      </view>
      <view :class="['nav-item', { 'active': activeTab === 'video' }]" @tap="changeTab('video')">
        <text>视频</text>
      </view>
      <view :class="['nav-item', { 'active': activeTab === 'ranking' }]" @tap="changeTab('ranking')">
        <text>排行榜</text>
      </view>
    </view>

    <!-- 根据选中的标签显示相应的内容 -->
    <view v-if="activeTab === 'hot'" class="content">
      <text>这里是热门内容</text>
    </view>
    <view v-if="activeTab === 'recommend'" class="content">
      <text>这里是推荐内容</text>
    </view>
    <view v-if="activeTab === 'video'" class="content">
      <text>这里是视频内容</text>
    </view>
    <view v-if="activeTab === 'ranking'" class="content">
      <text>这里是排行榜内容</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'hot' // 默认激活的标签
    };
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab;
      // 可以在这里添加其他逻辑，比如页面切换动画或者加载不同的数据
    }
  }
};
</script>

<style>
/* 样式部分 */
.container {
  padding: 10px;
}
.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #f8f8f8;
  padding: 5px 0;
}
.nav-item {
  flex-grow: 1;
  text-align: center;
  padding: 10px;
}
.nav-item.active {
  color: #ff5a5f; /* 激活状态的颜色 */
  font-weight: bold;
}
.content {
  margin-top: 20px;
}
</style>