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>

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

相关推荐
Doker 多克15 分钟前
Python-Django系列—部件
开发语言·python
海底火旺16 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺17 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码17 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou18 分钟前
组件测试
前端
JustHappy20 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
江沉晚呤时30 分钟前
深入解析 ASP.NET Core 中的 ResourceFilter
开发语言·c#·.net·lucene
huangyuchi.33 分钟前
【C++11】Lambda表达式
开发语言·c++·笔记·c++11·lambda·lambda表达式·捕捉列表
张可35 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
培根芝士42 分钟前
electron-updater实现自动更新
javascript·electron