2 uni项目那个 底部tab搭建

我发现uni ,本质就是对vue的 封装,

就这个在uni 中配置下就搞定了,很简单

{
	"pages": [
		{
					"path": "pages/index/index"
				},
				{
					"path": "pages/member/member"
				},
				{
					"path": "pages/cart/cart"
				},
				{
					"path": "pages/search/search"
				}
			   
        ,{
			"path" : "pages/goods/ziyuan",
			"style" : {}
		},{
			"path" : "pages/goods/women",
			"style" : {}
		},{
			"path" : "pages/goods/learn",
			"style" : {}
		},{
			"path" : "pages/goods/contact",
			"style" : {}
		}
        ,{
            "path" : "component/ShopList/ShopList",
            "style" : {
				"enablePullDownRefresh":true
			}
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "黑马商城",
		"navigationBarBackgroundColor": "#1989fa",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar":{
		
		"list":[
			{
				"pagePath": "pages/index/index",
				 "iconPath": "static/icon/home.png",
				 "selectedIconPath": "static/icon/home-active.png",
				 "text": "首页"
			} ,
			{
				"pagePath": "pages/member/member",
				 "iconPath": "static/icon/member.png",
				 "selectedIconPath": "static/icon/member-active.png",
				 "text": "会员"
			} ,
			{
				"pagePath": "pages/cart/cart",
				 "iconPath": "static/icon/cart.png",
				 "selectedIconPath": "static/icon/cart-active.png",
				 "text": "购物车"
			} ,
			{
				"pagePath": "pages/search/search",
				 "iconPath": "static/icon/search.png",
				 "selectedIconPath": "static/icon/search-active.png",
				 "text": "搜索"
			}
		]
	}
	
}

就是将tabBar 和pages 配置对应起来

这 两项最好写在各自配置第一个对象(最佳实践,防止报错)

pages  里写好对应的组件,组件和vue 没多大变化,只是用view 代替了div

简单吧,就是如此简单,别着急,回头我们用vue 重写这个项目就不简单了

这里要说的额,uni-app 不用vue-router 管理路由,而是用配置对象,

行,这篇先到这里,回头我们继续

猜你喜欢

转载自blog.csdn.net/qq_15009739/article/details/108429599