通过 npm 安装vant-weapp

https://youzan.github.io/vant-weapp/#/quickstart

1.系统导航

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#6495ED",
  "navigationBarTextStyle": "white", 
  "navigationBarTitleText": "首页",
  "navigationStyle": "custom",
  "backgroundColor": "#000",
  "enablePullDownRefresh": false
}

配置.json字段说明

"navigationStyle": "custom"

引入文件

"usingComponents": {}, 

导航背景颜色

  "navigationBarBackgroundColor": "#6495ED",

导航文字颜色

  "navigationBarTextStyle": "white", 

导航标题

  "navigationBarTitleText": "首页",

背景颜色

  "backgroundColor": "#000",

是否允许下拉刷新

  "enablePullDownRefresh": false

如需所有的页面都这样展示的话，那需要在全局文件app.json里的window里设置。

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom", // 自定义导航栏配置
  },

1.自定义导航

在需要设置头部导航栏的页面中通过json配置 "navigationStyle": "custom" ，自定义导航栏，只保留胶囊按钮