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

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

  1. 在页面的.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>
  1. 在页面的 script 部分,定义 current 变量,用于记录当前选中的选项卡,并定义 onClickTabBar 方法,用于处理选项卡点击事件。
javascript 复制代码
<script>
export default {
  data() {
    return {
      current: 0, // 当前选中的选项卡
    };
  },
  methods: {
    onClickTabBar(event) {
      this.current = event.detail.index; // 更新当前选中的选项卡
    },
  },
};
</script>
  1. 根据当前选中的选项卡,动态显示不同的内容。在页面内部添加多个不同的区域,分别与不同的选项卡对应,并使用v-ifv-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>

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

相关推荐
Anlici1 分钟前
如何优化十万数据的浏览体验?从性能、监控到布局全面拆解
前端·性能优化
utmhikari1 分钟前
【日常随笔】万字长文,如何用pyside6开发一个python桌面工具
前端·python·pyqt
JustHappy8 分钟前
「Versakit 0.3 重磅发布」 两个月开发成果全揭!
前端·javascript·vue.js
chenqi18 分钟前
WebGPU和WebLLM:在浏览器中解锁端侧大模型的未来
前端·人工智能
Lingxing19 分钟前
Vue组件树:从设计到实现的全方位指南 🚀
前端·vue.js
玖玖passion20 分钟前
leader:请你用Protobuf进行数据交互🥲
前端
Linruoxin23 分钟前
为什么给 body 设置背景会直接铺满整个视口?
前端·css
Jenlybein26 分钟前
Vue3 权限控制:利用动态路由与自定义指令
前端·vue.js
codelang2 小时前
Cline + MCP 开发实战
前端·后端
好_快3 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读