【首页】顶部开发

三、【首页】顶部开发

1.1 完成效果图

1.2 首页顶部需要在pages.json中配置，代码如下：

框选中的部分为矢量中unicode代码将&#x改为\u

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "百年奥莱",
				"navigationBarBackgroundColor":"#ffffff",
				"app-plus": {
					"titleNView": {
						"buttons": [
							{
								"float": "left",
								"fontSrc": "./static/iconfont.ttf",
								"text": "\ue848"
							},
							{
								"float": "right",
								"fontSrc": "./static/iconfont.ttf",
								"text": "\ue8bd;"
							}
						],
					}
				}
			}
		}
	    ,{
            "path" : "pages/list/list",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/shopcart/shopcart",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
	
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [
			{
			"pagePath": "pages/index/index",
			"iconPath": "static/tabbar/indx.png",
			"selectedIconPath": "static/tabbar/indexSelected.png",
			"text": "首页"
		    }, 
		    {
			"pagePath": "pages/list/list",
			"iconPath": "static/tabbar/list.png",
			"selectedIconPath": "static/tabbar/listSelected.png",
			"text": "分类"
		    },
			{
			 "pagePath": "pages/shopcart/shopcart",
			 "iconPath": "static/tabbar/shop.png",
			 "selectedIconPath": "static/tabbar/shopSelected.png",
			 "text": "购物车"
		    },
			{
			  "pagePath": "pages/my/my",
			  "iconPath": "static/tabbar/my.png",
			  "selectedIconPath": "static/tabbar/mySelected.png",
			  "text": "我的"
			}
		]
	}

}

注：app-plus在app中和H5生效，各种小程序不生效，如需定制小程序的头部需要这样做：

 1、pages.json中加入： "navigationStyle":"custom"

2、 page/index/index.vue中写入:

       <!-- #ifdef MP-WEIXIN -->

       <view>

       ....你的小程序头部...

       </view>

       <!-- #endif -->