tnblog
首页
精品
资源
登录
这世间的真话本就不多,一个女子的脸红,胜过一大段对白。
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2020TNBLOG.NET
技术交流:群号677373950
欢迎加群交流技术

uni-app底部菜单

209人阅读 2020/5/20 10:11 总访问:825280 评论: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

评价