Taro固定底部切换AtTabBar

最新推荐文章于 2024-03-04 16:21:45 发布

原创

最新推荐文章于 2024-03-04 16:21:45 发布 · 1.2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#Taro #AtTabBar #固定底部

本文介绍了如何在Taro项目中利用AtTabBar实现底部导航栏的固定效果。通过引入Taro UI并设置AtTabBar组件的fixed属性，可以创建一个始终位于屏幕底部的导航栏。同时，设置了点击事件onClick，当用户点击底部按钮时，会触发handleClick方法，根据下标切换页面路径。Taro UI组件库提供了丰富的组件，对于开发者来说是一个实用的资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先引入taro-ui，加入标签AtTabBar

import Taro, { Component, Config } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'
import './index.scss'

标题为：个人中心，显示下标为3

config = {
    navigationBarTitleText: '个人中心'
  }
  constructor () {
    super(...arguments)
    this.state = {
      current: 3
    }
  }

点击底部按钮根据下标切换路径

handleClick (value) {
    this.setState({
      current: value
    })
    switch (value) {
      case 0:
          Taro.redirectTo({
              url: `/pages/index/index`
          })
          break;
      case 1:
          Taro.redirectTo({
              url: `/pages/pinglun/index`
          })
          break;
      case 2:
          Taro.redirectTo({
              url: `/pages/yindao/index`
          })
          break;
      case 3:
          Taro.redirectTo({
              url: `/pages/wode/index`
          })
          break;            
      defau