uniapp书写顶部选项卡代码详细例子

song199905242023-11-02 21:49

以下是一个基于uni-app框架，使用顶部选项卡的代码示例。

在页面的.vue文件中，添加一个uni-tab-bar组件，并在组件内部添加多个uni-tab-bar-item组件，来实现顶部选项卡的布局。

html 复制代码

<template>
  <view>
    <uni-tab-bar :current="current" @click="onClickTabBar">
      <uni-tab-bar-item icon="home" text="首页"></uni-tab-bar-item>
      <uni-tab-bar-item icon="search" text="搜索"></uni-tab-bar-item>
      <uni-tab-bar-item icon="user" text="个人"></uni-tab-bar-item>
    </uni-tab-bar>
  </view>
</template>

在页面的 script 部分，定义 current 变量，用于记录当前选中的选项卡，并定义 onClickTabBar 方法，用于处理选项卡点击事件。

javascript 复制代码

<script>
export default {
  data() {
    return {
      current: 0, // 当前选中的选项卡
    };
  },
  methods: {
    onClickTabBar(event) {
      this.current = event.detail.index; // 更新当前选中的选项卡
    },
  },
};
</script>

根据当前选中的选项卡，动态显示不同的内容。在页面内部添加多个不同的区域，分别与不同的选项卡对应，并使用v-if或v-show指令，根据当前选中的选项卡展示相关内容。

html 复制代码

<template>
  <view>
    <uni-tab-bar :current="current" @click="onClickTabBar">
      <uni-tab-bar-item icon="home" text="首页"></uni-tab-bar-item>
      <uni-tab-bar-item icon="search" text="搜索"></uni-tab-bar-item>
      <uni-tab-bar-item icon="user" text="个人"></uni-tab-bar-item>
    </uni-tab-bar>
    <view v-if="current === 0">首页内容</view>
    <view v-if="current === 1">搜索内容</view>
    <view v-if="current === 2">个人内容</view>
  </view>
</template>

通过以上代码，就可以实现一个简单的顶部选项卡，在不同的选项卡中展示不同的内容。需要注意的是，在实际使用中，还需要根据具体的需求对选项卡和内容进行样式和功能的定制。