uni-app学习笔记3(TabBar)

迷南。 2022-11-26 11:58 46阅读 0赞

TabBar就是移动端软件下面的类似选项卡的东西。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70][]

# 一、添加Tabbar #

1、在pages.json中添加如下代码

"tabBar": {
    		"color": "#7A7E83",
    		"selectedColor": "#3cc51f",
    		"borderStyle": "black",
    		"backgroundColor": "#ffffff",
    		"height": "50px",
    		"fontSize": "10px",
    		"iconWidth": "24px",
    		"spacing": "3px",
    		"list": [{
    			"pagePath": "pages/home/homeList",	//界面路径
    			"iconPath": "static/image/机具.png",	//默认图标
    			"selectedIconPath": "static/image/公益.png",	//选中后的图标
    			"text": "主页"	//标题
    		},{
    			"pagePath": "pages/index/index",
    			"iconPath": "static/image/首页.png",
    			"selectedIconPath": "static/image/三人.png",
    			"text": "首页"
    		}, {
    			"pagePath": "pages/my/myList",
    			"iconPath": "static/image/爱心.png",
    			"selectedIconPath": "static/image/彩蛋.png",
    			"text": "个人中心"
    		}]
    	}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 1][]

就可以达到最上面展示的效果，切换不同的Tabbar，可以直接跳转到不同的界面。

如果使用其他方式切换Tabbar，则需要

![20200812105052678.png][]

uni.switchTab({
    	 url: '/pages/my/myList'
    });

地址需要在pages.json中配置。

# 二、动态添加Tabbar #

研究中。。。。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70]: /images/20221124/f3fe4b410994492a9f371479482c10e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 1]: /images/20221124/95656fb27bea4f56933ca1ce4b34df60.png
[20200812105052678.png]: /images/20221124/269c03d9d81f4790aa80df0a787ff3d0.png