【首页】顶部开发

三、【首页】顶部开发

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中写入:

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