使用uniapp原生组件配置底部tabbar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

文章目录使用uniapp原生组件配置底部tabbar开始配置tabbar常用的配置项介绍：tabbar – list 配置项介绍：参考代码：

开始配置

tabbar配置选项是和pages同级的

tabbar常用的配置项介绍：

color
tab 上的文字默认颜色

selectedColor
tab 上的文字选中时的颜色

backgroundColor
tab 的背景色

list
tab 的列表，最少2个、最多5个 tab

以上为常用的配置选项，其他配置项可参考：uniapp官网

tabbar – list 配置项介绍：

pagePath
页面路径，必须在 pages 中先定义

text
tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标

iconPath
图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标

selectedIconPath
选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

把上面这些配置项层次关系和作用搞清楚之后，就可以动手配置一个基本的tabbar了

参考代码：

{

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

		……

    ],

	"globalStyle": {

		……

	},

	"tabBar":{

		"selectedColor":"white",

		"list":[

			{

				"text":"首页",

				"pagePath":"pages/index/index",

				"iconPath":"static/Homehomepagemenu.png",

				"selectedIconPath":"static/HOME.png"

			},

			{

				"text":"新闻",

				"pagePath":"pages/news/news",

				"iconPath":"static/news.png",

				"selectedIconPath":"static/news_1.png"

			},

			{

				"text":"购物车",

				"pagePath":"pages/cart/cart",

				"iconPath":"static/cart.png",

				"selectedIconPath":"./static/cart_1.png"

			},

			{

				"text":"成员",

				"pagePath":"pages/member/member",

				"iconPath":"./static/LC_icon_user_fill_1.png",

				"selectedIconPath":"static/user.png"

			}

		],

		"backgroundColor":"#c41e00"

	}

}

效果如下：


//希望以上内容能够帮助到大家?，不妨点个赞
原创：https://www.panoramacn.com

源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。
专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说


免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。
您必须遵守我们的协议，如果您下载了该资源行为将被视为对《免责声明》全部内容的认可->
联系客服
投诉资源
 www.panoramacn.com资源全部来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。
敬请谅解！ 侵权删帖/违法举报/投稿等事物联系邮箱：2640602276@qq.com
                
                
未经允许不得转载：书荒源码源码网每日更新网站源码模板！ » 使用uniapp原生组件配置一个基础的底部tabbar
                                
                                    
使用uniapp原生组件配置一个基础的底部tabbar
                                
                    

        

            
            
关注我们小说电影免费看
            
关注我们，获取更多的全网素材资源，有趣有料！
            
120000+人已关注
        
    
 
                
                    


                    
分享到：
        
                                赞(0)
        
                    打赏