应无所住,而生其心
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

uni-app底部菜单

5205人阅读 2020/5/20 10:11 总访问:4813052 评论:0 收藏:0 手机
分类: 移动开发


uni-app的底部菜单使用很简单和微信小程序类似,直接配置即可。

官方文档


示例代码:
和官网的类似:

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

效果:

当然我这个是图片没有加而已


注意pagePath里边的路径对应的页面要先存在,不然可能显示不出来哟
还要注意一下tabBar放的位置


欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价