如果您对微信小程序—tabBar底部导航中文注解api和微信小程序底部导航怎么写感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解微信小程序—tabBar底部导航中文注解api的各种细节，并对微信

如果您对微信小程序 —tabBar 底部导航中文注解 api和微信小程序底部导航怎么写感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解微信小程序 —tabBar 底部导航中文注解 api的各种细节，并对微信小程序底部导航怎么写进行深入的分析，此外还有关于flutter TabBar 底部导航栏、tabBar底部导航栏、taro自定义顶部导航条/底部Tabbar、uni-app自定义tabbar底部导航的实用技巧。

• 微信小程序 —tabBar 底部导航中文注解 api（微信小程序底部导航怎么写）
• flutter TabBar 底部导航栏
• tabBar底部导航栏
• taro自定义顶部导航条/底部Tabbar
• uni-app自定义tabbar底部导航

微信小程序 —tabBar 底部导航中文注解 api（微信小程序底部导航怎么写）

OSC 请你来轰趴啦！1028 苏州源创会，一起寻宝 AI 时代

{
    "pages":[
        "pages/index/index",
        "pages/detail/detail"
    ],
    "window":{
        "navigationBarTitleText": "TabBar",
        "navigationBarBackgroundColor": "#F60",
        "navigationBarTextStyle": "white"
    },

    //tabBar注意是B是大写，有朋友提问运行时tab没出现，检查是不是这里手误
    "tabBar":{

    //文档指出color是必填项，其实可为空，不重写color就是深灰，样式更统一
        "color": "#ddd",

   //同样，文档指出selectedColor是必填项，不过selectedColor有必要重写，区分当前项与普通项
        "selectedColor": "#3cc51f",

   //同样，文档指出color是必填项，其实可为空，不重写backgroundColor就是浅灰，样式更统一。
        "backgroundColor": "#fff",

   //borderStyle，不写默认就是黑，那就黑好了，white的话，会少一条分隔线，跟页面混在一起了
        "borderStyle":"black",
        "list":[{
                "pagePath":"pages/index/index",

   //iconPath图标是非必填，只是tab栏会变矮，自然selectedIconPath也可不写
                "iconPath":"image/icon_API.png",
                "selectedIconPath":"image/icon_API_HL.png",
                "text":"index"
            },{
                "pagePath":"pages/detail/detail",
                "iconPath":"image/icon_component.png",
                "selectedIconPath":"image/icon_component_HL.png",
                "text":"detail"
            }]
    }
}

flutter TabBar 底部导航栏

更多文章请查看 lutter从入门 到精通

实现底部导航栏并点击切换页面可简述为有三种方式

• TabBar + TabBarView
• BottomNavigationBar + BottomNavigationBarItem
• 自定义 BottomAppBar
• 自定义绘制布局

在这里 使用 TabBar + TabBarView 来实现，与后两者明显不同的是，前者页面可以滑动.
TabBar 是一排水平的标签，可以来回切换.

import ''package:flutter/material.dart'';

/**
 * 有状态StatefulWidget
 *  继承于 StatefulWidget，通过 State 的 build 方法去构建控件
 */
class BotomeMenumTabBarPage extends StatefulWidget {
   
   
   
  通过构造方法传值
  BotomeMenumTabBarPage();

  //主要是负责创建state
  @override
  BotomeMenumTabBarPageState createState() => BotomeMenumTabBarPageState();
}

/**
 * 在 State 中,可以动态改变数据
 * 在 setState 之后，改变的数据会触发 Widget 重新构建刷新
 */
class BotomeMenumTabBarPageState extends State<BotomeMenumTabBarPage>  with SingleTickerProviderStateMixin{
   
   
   
  BotomeMenumTabBarPageState();
  TabController tabController;
  @override
  void initState() {
   
   
   
    ///初始化，这个函数在生命周期中只调用一次
    super.initState();
    tabController = new TabController(length: pages.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
   
   
   
    //构建页面
    return buildBottomTabScaffold();
  }

  //当前显示页面的
  int currentIndex = 0;
  
  //点击导航项是要显示的页面
  final pages = [
    ChildItemView("首页"),
    ChildItemView("发现"),
    ChildItemView("动态"),
    ChildItemView("我的")
  ];

  Widget buildBottomTabScaffold() {
   
   
   
    return new Scaffold(
      body: new TabBarView(controller: tabController, children:pages),
      bottomNavigationBar: new Material(
        color: Colors.blue,
        child: new TabBar(
          controller: tabController,
          tabs: <Tab>[
            new Tab(text: "首页", icon: new Icon(Icons.home)),
            new Tab(text: "发现", icon: new Icon(Icons.find_in_page)),
            new Tab(text: "动态", icon: new Icon(Icons.message)),
            new Tab(text: "我的", icon: new Icon(Icons.person)),
          ],
          indicatorWeight: 0.1,
        ),
      ),
    );
  }

  /*切换页面*/
  void _changePage(int index) {
   
   
   
    /*如果点击的导航项不是当前项  切换 */
    if (index != currentIndex) {
   
   
   
      setState(() {
   
   
   
        currentIndex = index;
      });
    }
  }
}

//子页面
class ChildItemView extends StatefulWidget {
   
   
   
  String _title;

  ChildItemView(this._title);

  @override
  _ChildItemViewState createState() => _ChildItemViewState();
}

class _ChildItemViewState extends State<ChildItemView> {
   
   
   
  @override
  Widget build(BuildContext context) {
   
   
   
    return Container(
      child: Center(child: Text(widget._title)),
    );
  }
}

本文同步分享在 博客“早起的年轻人”（CSDN）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

tabBar底部导航栏

nav.js

import React from ''react'';
import { Button, View, Text, SafeAreaView } from ''react-native'';
import { NavigationContainer } from ''@react-navigation/native'';
import { createStackNavigator } from ''@react-navigation/stack'';
import Login from ''./pages/account/login''
import Tabbar from ''./tabbar''
import Userinfo from ''./pages/account/userinfo''

const Stack = createStackNavigator();

function Nav() {
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode="none" initialRouteName="Tabbar">
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Tabbar" component={Tabbar} />
        <Stack.Screen name="Userinfo" component={Userinfo} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default Nav;

tab.js

import React, { Component } from ''react'';
import { View, Text, SafeAreaView, StatusBar } from ''react-native'';
import TabNavigator from ''react-native-tab-navigator'';

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === ''home''}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: ''home'' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === ''profile''}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: ''profile'' })}>
    {profileView}
  </TabNavigator.Item>
</TabNavigator>

taro自定义顶部导航条/底部Tabbar

介绍

这几天一直在学习Taro框架技术，官方说是支持编译到多端，可是提供的都是H5、小程序案例，至于RN案例 网上都很少，经过一番深究，有了下文基于taro+react实现的自定义顶部导航栏、底部tabbar功能，支持编译到多端(h5 + 小程序 + react-native)

如下图：在H5/小程序/RN均测试通过

项目中用到的图标都是阿里iconfont字体图标，下载好后将fonts文件夹拷贝到项目目录下。

import ''./styles/fonts/iconfont.scss''
在h5、小程序下 这种写法即可： <Text className="iconfont icon-back"></Text>

不过为了兼容RN，只能通过Unicode方式这样写：<Text className="iconfont">&#xe84c;</Text>

如果是通过变量传递：let back = ''\ue84c''   <Text>{back}</Text>

自定义导航条NavBar

在App.js配置navigationStyle，将设置为custom，就可以自定义导航栏

class App extends Component {
    config = {
        pages: 
            ''pages/index/index'',
            ...
        ],
        window: {
            backgroundTextStyle: ''light'',
            navigationBarBackgroundColor: ''#fff'',
            navigationBarTitleText: ''Taro'',
            navigationBarTextStyle: ''black'',
            navigationStyle: ''custom''
        },
        ...
    }
    
    ...
}

在components目录下新建导航栏Navbar组件

/*
 * @desc   Taro自定义Navbar组件
 * @about  Q：282310962  wx：xy190310
 */

import Taro from ''@tarojs/taro''
import { View, Text, Input, Image } from ''@tarojs/components''
import classNames from "classnames";
import ''./index.scss''
 
export default class NavBar extends Taro.Component {
    // 默认配置
    static defaultProps = {
        isBack: false,
        leftIcon: ''\ue84c'',
        title: '' '',
        background: ''#6190e8'',
        color: ''#fff'',
        center: false,
        search: false,
        searchStyle: '''',
        fixed: false,
        headerRight: [],
    }
    constructor(props) {
        super(props)
        this.state = {
            searchText: '''',
        }
    }
    
    ...
 
    render() {
        const { isBack, leftIcon, title, background, color, center, search, searchStyle, fixed, height, headerRight } = this.props
        const { searchText } = this.state
        
        let weapp = false
        if (process.env.TARO_ENV === ''weapp'') {
            weapp = true
        }
 
        return (
            <View className={classNames(''taro__navbar'', fixed && ''taro__navbar--fixed'', fixed && weapp && ''taro__navbar-weapp--fixed'')}>
                <View className={classNames(''taro__navbar-wrap'', fixed && ''taro__navbar-wrap--fixed'', weapp && ''taro__navbar-wrap__weapp'')} style={{backgroundColor: background}}>
                    {/* 返回 */}
                    <View className={classNames(''taro__navbar-left__view'', isBack && ''taro__navbar-left__view--isback'')}>
                    {isBack &&
                        <TouchView activeOpacity={.5} onClick={this.handleNavigateBack}>
                            <View className="taro__navbar-icon__item"><Text className="iconfont taro__navbar-iconfont" style={{color: color}}>{leftIcon}</Text></View>
                        </TouchView>
                    }
                    </View>
                    
                    {/* 标题 */}
                    {!search && center && !weapp ? <View className="flex1" /> : null}
                    {search ? 
                    (
                        <View className="taro__navbar-search flex1">
                            <Input className="taro__navbar-search__input" placeholder="搜索..." onInput={this.updateInputText} style={{color: color, ...searchStyle}} />
                        </View>
                    )
                    :
                    (
                        <View className={classNames(''taro__navbar-title flex1'', center && !weapp && ''taro__navbar-title--center'')}>
                            {title && <Text className="taro__navbar-title__text" style={{color: color}}>{title}</Text>}
                        </View>
                    )
                    }
 
                    {/* 右侧 */}
                    <View className="taro__navbar-right__view">
                    {headerRight.map((item, index) => (
                        <TouchView activeOpacity={.5} key={index} onClick={()=>item.onClick && item.onClick(searchText)}>
                            <View className="taro__navbar-icon__item">
                                {item.icon && <Text className="iconfont taro__navbar-iconfont" style={{color: color, ...item.style}}>{item.icon}</Text>}
                                {item.text && <Text className="taro__navbar-iconfont__text" style={{color: color, ...item.style}}>{item.text}</Text>}
                                {item.img && <Image className="taro__navbar-iconfont__img" src={item.img} mode=''aspectFit'' />}
                                {/* 圆点 */}
                                {!!item.badge && <Text className="taro__badge taro__navbar-badge">{item.badge}</Text>}
                                {!!item.dot && <Text className="taro__badge-dot taro__navbar-badge--dot"></Text>}
                            </View>
                        </TouchView>
                    ))
                    }
                    </View>
                </View>
            </View>
        );
    }
}

在页面引入组件即可：import NavBar from ''@components/navbar''

支持自定义背景、颜色、左侧图标、标题居中、搜索框，右侧按钮支持图标/文字/图片，还可以设置样式，红点提示、事件处理

<NavBar title=''Taro标题栏'' fixed
    headerRight={[
        {icon: ''\ue614'', style: {color: ''#e93b3d''}},
        {img: require(''../../assets/taro.png''), dot: true, onClick: this.handleCallback},
        {icon: ''\ue600'', style: {marginRight: 10}},
    ]} 
/>

<NavBar isBack leftIcon={''\ue69f''} title=''搜索栏'' background=''#42b983'' color=''#fcc'' search
    searchStyle={{
        backgroundColor:''rgba(255,255,255,.6)'', borderRadius: Taro.pxTransform(50), color: ''#333''
    }}
    headerRight={[
        {icon: ''\ue622'', style: {color: ''#6afff9''}},
        {icon: ''\ue63a''},
    ]} 
/>

自定义Tabbar菜单

自定义tabbar也支持自定义背景、颜色、图标，点击选项事件返回索引值

import Taro from ''@tarojs/taro''
import { View, Text } from ''@tarojs/components''
import classNames from ''classnames''
import ''./index.scss''
 
export default class TabBar extends Taro.Component {
    // 默认参数配置
    static defaultProps = {
        current: 0,
        background: ''#fff'',
        color: ''#999'',
        tintColor: ''#6190e8'',
        fixed: false,
        onClick: () => {},
        tabList: []
    }
    constructor(props) {
        super(props)
        this.state = {
            updateCurrent: props.current
        }
    }
    ...
 
    render() {
        const { background, color, tintColor, fixed } = this.props
        const { updateCurrent } = this.state
        
        return (
            <View className={classNames(''taro__tabbar'', fixed && ''taro__tabbar--fixed'')}>
                <View className={classNames(''taro__tabbar-list'', fixed && ''taro__tabbar-list--fixed'')} style={{backgroundColor: background}}>
                    {this.props.tabList.map((item, index) => (
                        <View className="taro__tabbar-item taro__tabbar-item--active" key={index} onClick={this.updateTabbar.bind(this, index)}>
                            <View className="taro__tabbar-icon">
                                <Text className="iconfont taro__tabbar-iconfont" style={{color: updateCurrent == index ? tintColor : color}}>{item.icon}</Text>
                                {/* 圆点 */}
                                {!!item.badge && <Text className="taro__badge taro__tabbar-badge">{item.badge}</Text>}
                                {!!item.dot && <Text className="taro__badge-dot taro__tabbar-badge--dot"></Text>}
                            </View>
                            <Text className="taro__tabbar-title" style={{color: updateCurrent == index ? tintColor : color}}>{item.title}</Text>
                        </View>
                    ))}
                </View>
            </View>
        );
    }
}

<TabBar current={currentTabIndex} background=''#f8f8f8'' color=''#999'' tintColor=''#6190e8'' fixed onClick={this.handleTabbar}
    tabList={[
        {icon: ''\ue627'', title: ''首页'', badge: 8},
        {icon: ''\ue61e'', title: ''商品''},
        {icon: ''\ue605'', title: ''个人中心'', dot: true},
    ]}
/>

到这里就基本介绍完了，大家在使用Taro开发多端项目的时候，需多注意RN下样式问题。后续也会继续分享一些taro实例。
ReactNative聊天APP实战|仿微信聊天/朋友圈/红包界面

uni-app自定义tabbar底部导航

uni-app中原生tabbar配置和小程序差不多，具体配置查看这篇文章
https://uniapp.dcloud.io/collocation/pages?id=tabbar

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/component/index",
        "iconPath": "static/image/icon_component.png",
        "selectedIconPath": "static/image/icon_component_HL.png",
        "text": "组件"
    }, {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}

在pages.json中如果没有配置tabBar参数，uni-app中就不会显示底部tabbar，可以通过自定义组件形式来实现想要的自定义tabbar效果。
如下图：在H5端、小程序、App端 下显示的自定义tabbar效果

新建tabbar.vue组件，并在main.js里面引入全局组件

<block v-for="(item,index) in tabList" :key="index">
    <view:@tap="switchTab(index)">
        <view>
            <text::></text>
            <text v-if="item.badge">{{item.badge}}</text>
            <text v-if="item.badgeDot"></text>
            </view>
        <view:>{{item.text}}</view>
    </view>
</block>

<script>
    export default {
        data() {
            return {
                tabList: [
                    {
                        icon: ''icon-emotion'',
                        text: ''tab01'',
                        badge: 1
                    },
                    {
                        icon: ''icon-qianbao'',
                        text: ''tab02'',
                    },
                    {
                        icon: ''icon-choose01'',
                        text: ''tab03'',
                        badgeDot: true
                    }
                ],
                currentTabIndex: this.current
            }
        },
        props: {
            current: { type: [Number, String], default: 0 },
            backgroundColor: { type: String, default: ''#fbfbfb'' },
            color: { type: String, default: ''#999'' },
            tintColor: { type: String, default: ''#42b983'' }
        },
        methods: {
            switchTab(index){
                this.currentTabIndex = index
                this.$emit(''click'', index)
            }
        },
    }
</script>

import tabBar from ''./components/tabbar.vue''
Vue.component(''tab-bar'', tabBar)

在页面中引入tabbar，并自定义tabbar属性参数

<tab-bar :current="currentTabIndex" backgroundColor="#fbfbfb" color="#999" tintColor="#42b983" @click="tabClick"></tab-bar>

<tab-bar :current="2" backgroundColor="#1a4065" color="#c3daf1" tintColor="#02f32b" @click="tabClick"></tab-bar>

data() {
    return {
        ...
        currentTabIndex: 1
    }
},
methods: {
    tabClick(index){
        console.log(''返回tabBar索引：'' + index)
        this.currentTabIndex = index
    },
    ...
},

Tabbar组件已经发布至uniapp插件市场，免费下载使用。

https://ext.dcloud.net.cn/plugin?id=5593

上图实例中uni-app自定义顶部导航栏
https://blog.csdn.net/yanxinyun1990/article/details/100919657

关于微信小程序 —tabBar 底部导航中文注解 api和微信小程序底部导航怎么写的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于flutter TabBar 底部导航栏、tabBar底部导航栏、taro自定义顶部导航条/底部Tabbar、uni-app自定义tabbar底部导航等相关知识的信息别忘了在本站进行查找喔。