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

最新推荐文章于 2025-05-08 16:49:49 发布

吴雄辉

最新推荐文章于 2025-05-08 16:49:49 发布

阅读量2.8k

点赞数

文章标签： uni app自定义index.html

本文介绍了如何在uni-app中自定义H5页面的头部标题栏，包括在pages.json中设置导航为false，编写CSS样式以及引入组件进行导航切换功能。详细展示了去除原生导航并创建自定义导航栏的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

H5中效果如下

4733513fb8a4

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;

}

.nav_segmented {

flex: 1;

}

.top_view {

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

width: 100%;

position: fixed;

background-color: #ff80ab;

top: 0;

z-index: 999;

}

.right-plus {

font-family: iconfont;

margin-left: auto;

width: 40upx;

height: 70upx;

line-height: 70upx;

font-size: 34upx;

color: white;

text-align: center;

font-family: iconfont;

margin-right: 20upx;

}

.left-nav-icon {

font-family: iconfont;

margin-left: auto;

width: 40upx;

height: 70upx;

line-height: 70upx;

font-size: 34upx;

text-align: center;

font-family: iconfont;

margin-right: 20upx;

color: #ff80ab;

}

引入组件

import uniSegmentedControl from '@/components/uni-segmented-control.vue';

components: {

uniCard,

uniIcon,

uniSegmentedControl

切换segmented

onClickItem(index) {

this.current = index;

if (index == 0) {

uni.request({

url: this.serverUrl + '/otc/offer/getOffer?type=出售',

method: 'GET',

success: res => {

this.priceList = res.data.data;

fail: () => {},

complete: () => {}

});

} else {

uni.request({

url: this.serverUrl + '/otc/offer/getOffer?type=购买',

method: 'GET',

success: res => {

this.priceList = res.data.data;

fail: () => {},

complete: () => {}

});

}

数据

data() {

return {

items: ['购买', '出售'],

styles: [

{

value: 'button',

text: '按钮',

checked: true

{

value: 'text',

text: '文字'

}

colors: ['#4cd964', '#dd524d'],

current: 0,

colorIndex: 0,

activeColor: '#0FAEFF',

styleType: 'button',

priceList: []

};