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>

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

相关推荐
Gu Gu Study3 分钟前
枚举与lambda表达式,枚举实现单例模式为什么是安全的,lambda表达式与函数式接口的小九九~
java·开发语言
时光の尘18 分钟前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
以后不吃煲仔饭32 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师32 分钟前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者36 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟38 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
傻啦嘿哟1 小时前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用1 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net