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