uni app自定义index.html,uni-app H5 自定义顶部标题栏

最近，研究了一下uni-app的自定义导航，说起自定义导航，小程序不兼容。

H5中效果如下

image.png

实现步骤：

打开 pages.json 将原生的导航设置为false

{

"path": "pages/main/sell",

"style": {

"navigationBarTitleText": "交易",

"app-plus": {

//#ifdef H5

"titleNView": false

//#endif

}

},

"enablePullDownRefresh": true

}

因为去除页面原生的导航，我们需要在指定页面设置去掉的样式



页面css

.status_bar {

height: var(--status-bar-height);

width: 100%;

background-color: #ff80ab;

}

.top_nav_segmented {

background-color: #ff80ab;

padding-top: 15upx;

padding-bottom: 15upx;