uni-app 原生导航栏、自定义导航栏的开发及修改

最新推荐文章于 2024-09-20 11:22:27 发布
最新推荐文章于 2024-09-20 11:22:27 发布
阅读量1.6w 收藏 42
点赞数 10
分类专栏： uni-app爬坑记 文章标签： uni-app vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45466186/article/details/107207873
版权

本文使用uni-app的原生导航栏和自定义导航栏两种方式，实现了一个简单的二级搜索页面功能， 大体上演示了uni-app的导航栏开发两种方式的区别。能力有限，仅做参考，感谢阅读，欢迎评论~

文章首发于一度的博客：hawkew.github.io，欢迎来踩~

需求

  • 一级搜索页输入关键词并点击搜索，将进入二级搜索页面并展示搜索结果。
  • 二级搜索页顶部导航不可输入，点击后返回一级搜索页
  • 使用nvue渲染，所以文件格式都为nvue

UI方案

效果预览

在这里插入图片描述

自定义导航栏

uni-app支持关闭原生导航栏+前端标签组件模拟导航栏进行开发，同时官方也强调自定义HTML组件模拟导航栏会有性能问题[1]。

官方的uni ui提供了自定义导航栏组件：NavBar 导航栏，其中提供了带搜索框的样式。

使用自定义导航栏的，优缺点如下：

  • 优点：更方便的自定义和动态修改
  • 缺点：官方说明中的性能问题
基本实现思路
  1. 页面style设置navigationStyle值为custom
  2. 手动HTML绘制导航栏或直接使用插件
主要代码

pages.json

pages.json中配置页面navigationStyle为custom

//pages.json
{
    "pages":[
        {
    	"path": "pages/customTitle/customFirst",//一级搜索
    	"style": {
        "navigationStyle":"custom"
    	}
    },{
    	"path": "pages/customTitle/customSecond",//二级搜索
    	"style": {
        "navigationStyle":"custom"
    	}
    },
    ]
}

一级搜索页：

//customFirst.nvue
<template>
  <view>
    <!-- 顶部状态栏 -->
    <view :style="`height: ${iStatusBarHeight}px;`" class="status-bar"></view>
    
    <!-- 自定义导航栏 -->
    <uni-nav-bar :fixed="false" background-color="#1577fe" color="#ffffff" >
      <!-- 搜索框 -->
      <view class="input-view">
        <uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
        <input :focus="true" confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="search" v-model="keyword">
      </view>
      <!-- 左插槽 -->
      <view slot="left" @click="back">
        <uni-icons type="back" color="#FFFFFF"></uni-icons>
      </view>
      <!-- 右插槽 -->
      <view slot="right" @click="search">
        <text class="search">搜索</text>
      </view>
    </uni-nav-bar>
  </view>
</template>

二级搜索页：

实际配置与一级搜索页基本一致，只不过去除了右侧的搜索 。这里增加了一短代码<view>模拟关键词搜索结果

//customFirst.nvue
<template>
	<view>
     <!-- 顶部状态栏 -->
    <view :style="`height: ${iStatusBarHeight}px;`" class="status-bar"></view>
     <!-- 自定义导航栏 -->
    <uni-nav-bar :fixed="false" background-color="#1577fe" color="#ffffff"  >
    <!-- 搜索框 -->
    <view class="input-view" @click="back">
      <uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
      <input class="nav-bar-input" type="text" :placeholder="keyword">
    </view>
    <!-- 左插槽 -->
    <view slot="left" @click="back">
      <uni-icons type="back" color="#FFFFFF" ></uni-icons>
    </view>
   </uni-nav-bar>
 	<view class="">
     测试关键词： {{keyword}}
   </view>
  </view>
</template>
注意事项
  1. 页面设置为自定义导航栏时，需要设置一个status-bar的占位高度，否则内容会直接顶到顶部。nvue中可以通过获取状态栏高度+动态style的方式，其他模式可以直接使用uni-app的css变量 var(--status-bar-height)设置占位块的高度。
<!-- 顶部状态栏 -->
<view :style="`height: ${iStatusBarHeight}px;`" class="status-bar"></view>
<!-- 顶部状态栏 -->
  1. 使用navBar插件实现导航栏搜索框，如果需要修改搜索框两侧占位button的宽度，修改uni-nav-bar.vue插件源码中的样式中uni-navbar__header-btns-left、uni-navbar__header-btns-right、uni-navbar__header-btns的宽度width值即可。如果你使用slot插槽去设置左右占位button的宽度，也可以直接注释掉这几个样式的width。

原生导航栏

原生导航栏中的searchInput，backbutton和buttons都是在pages.json中完成配置的。具体可见官方文档：导航栏

优点：页面UI实现起来很方便。只需要对searchInput、backbutton、buttons进行样式的配置即可

缺点：

  • 想要动态修改搜索框里的值，会很麻烦。官方并没有提供这样的API；在APP端需要通过H5+的webview修改，而H5端则需要通过修改dom的操作来执行。
  • 需要对不同端分别进行配置。如需要在APP端和H5端实现原生搜索框，则需要在style中分别对h5和app-plus进行配置。
基本实现思路

页面style设置配置searchInput（中间的搜索框）和buttons（左边的返回和右边的搜索按钮）

主要代码
//originFirst.nvue
<template>
	<view class=""></view>
</template>
//originSecond.nvue
<template>
	<view class="">keyword : {{keyword}}</view>
</template>

//pages.json
{
    pages:[
          {
      "path": "pages/originTitle/originTitle",
      "style": {
        "navigationBarBackgroundColor": "#1577fe",
        "navigationBarTitleText": "uni-app",
        "h5": {
          "titleNView": {
            "autoBackButton": true,
            "backButton": {
              "background": "#FFFFFF",
              "color": "#FFFFFF",
              "colorPressed": "#FFFFFF"
            },
            "searchInput": {
              "align": "left",
              "placeholder": "搜索",
              "borderRadius": "5px",
              "backgroundColor": "#FFFFFF",
              "autoFocus": true
            },
            "buttons": [{
              "color": "#FFFFFF",
              "fontSize": "14px",
              "text": "搜索"
            }]
          }
        },
        "app-plus": {
          "titleNView": {
            "backButton": {
              "color": "#FFFFFF",
              "colorPressed": "#FFFFFF"
            },
            "searchInput": {
              "align": "left",
              "placeholder": "搜索",
              "borderRadius": "5px",
              "backgroundColor": "#FFFFFF",
              "autoFocus": true
            },
            "buttons": [{
              "color": "#FFFFFF",
              "fontSize": "14px",
              "text": "搜索"
            }]
          }
        }
      }
    ]
}

动态修改

无论是自定义导航栏，还是uni-app的原生导航栏，都是可以进行样式修改的。

但是，就像之前提到过的那样，uni-app没有提供对searchInput进行修改的API，所以需要通过H5+等API或者直接修改dom等方式进行修改。

参数传递

回到需求中去，可以看到主要需要修改的内容为一级搜索页面和二级搜索页面的 searchInput 中展示的关键词。

这里，可以在一级页面和二级页面分别定义一个keyword，并通过uni-app的页面跳转传参来实现在不同页面keyword的赋值。

用户在一级搜索页面点击搜索，则执行search函数，通过带参数的uni.navigateTo实现一级页面到二级页面的传参。

而二级页面回到一级页面，uni.navigateBack无法传递参数，但是可以使用getCurrentPages()拿到上一个页面，调用页面的$set方法来修改上一个页面的keyword值。

//一级搜索页面
data(){
    return{
        keyword:''
    }
},
methods(){
    search() {//点击搜索后运行
        uni.navigateTo({
            url:`./customSecond?keyword=${this.keyword}`
        })
    }
}
//二级搜索页面
data(){
    return{
        keyword:''
    }
},
onLoad(e){
    this.keyword = e.keyword; //onLoad周期可以拿到上一个页面传过来的参数
},
methods(){
    back(){//点击导航栏的输入框，或者回退button后运行
        var pages = getCurrentPages();
		var prevPage = pages[pages.length - 2]; //上一个页面
		prevPage.$set(prevPage, "keyword", this.keyword)
		uni.navigateBack()
    }
}

自定义导航栏

实现了参数的传递后，自定义导航栏的参数修改可以说是非常简单了。

在本例中，一级页面中的v-model="keyword"把搜索框的值传递给keyword，当搜索框的输入值变化时，keyword值也会同步变化。

而进入二级搜索页面时，可以通过输入框的:placeholder="keyword"，直接就可以把keyword值赋值给input的placeholder，在onLoad钩子拿到值之后，被被渲染到页面中。

原生导航栏

uni-app提供了一些**页面生命周期函数**，允许动态获取输入框的值，以及监听导航栏的相关事件

  • onNavigationBarSearchInputChanged：监听原生标题栏搜索输入框输入内容变化事件
  • onNavigationBarSearchInputConfirmed：监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
  • onNavigationBarSearchInputClicked：监听原生标题栏搜索输入框点击事件
  • onNavigationBarButtonTap：监听原生标题栏按钮点击事件，参数为Object
  • onBackPress：监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解

在一级搜索页面，可以在onNavigationBarSearchInputChanged钩子获取搜索框的输入值，并将其赋值给keyword；在onNavigationBarSearchInputConfirmed和onNavigationBarButtonTap（点击搜索按钮）调用search函数，进行页面的跳转

在二级搜索页面的onNavigationBarSearchInputClicked，调用back()方法返回一级搜索页面。

APP端——H5+ API

官方示例

官方的uni-app在App端动态修改原生导航栏代码示例中，提供了相关的思路及api使用：

  1. 获取webView对象，通过webView的相关APIsetTitleNViewButtonStyle（修改导航栏按钮），setTitleNViewButtonBadge（修改导航栏按钮的角标），setTitleNViewSearchInputFocus（修改导航栏搜索框的focus状态）

  2. 通过currentWebview 的getStyle()、setStyle()方法进行更新。

    详细的顶部标题栏相关的可修改样式，可以参考H5+ API--Webview

这篇官方的这篇示例文章是2018年的，代码中使用的webview的API已经更新，需要通过新的API去获取webView对象。示例代码更新后应该如下：

// #ifdef APP-PLUS  
var webView = this.$mp.page.$getAppWebview();  
var currentWebview = plus.webview.currentWebview();
// 修改buttons  
// index: 按钮索引, style {WebviewTitleNViewButtonStyles }  
webView.setTitleNViewButtonStyle(0, {  
    text: 'hello',  
});  

// 修改按钮上的角标  
// index: 按钮索引, text: 角标文本内容  
webView.setTitleNViewButtonBadge({  
    index: 0,  
    text: 10,  
});  

// 设置 searchInput的 focus  
// focus: true | false  
webView.setTitleNViewSearchInputFocus(true)  

// 设置 searchInput的 text  
webView.setTitleNViewSearchInputText(text)  

// searchInput 通过 webview 的 setStyle 方法进行更新  
var tn = currentWebview.getStyle().titleNView;  
if (tn.buttons) {    
uni.getSystemInfo({    
    success:function(res){    
        if (res.platform=="ios") { // 这里在HBuilderX 1.9.9版本有个bug，searchInput的I变小写了 ，临时绕过下。更高版本会修复此bug    
            tn.searchinput.placeholder = 'test';    
            currentWebview.setStyle({    
                titleNView: tn    
            });    
        } else{    
            tn.searchInput.placeholder = 'test'; //这里有个已知bug，HBuilderX 1.9.9上，当searchInput位于首页时，动态设置placehold会导致buttons的点击事件消失。更高版本会修复此bug    
            currentWebview.setStyle({    
                titleNView: tn    
            });    
        }    
    }    
})    
}    

// #endif

参考示例代码，APP端使用plus API修改一级页面的输入值：

var currentWebview = plus.webview.currentWebview();
currentWebview.setTitleNViewSearchInputText(this.keyword);

修改二级搜索页面的placeholder：

var currentWebview = plus.webview.currentWebview();
currentWebview.setTitleNViewSearchInputFocus(false);
var tn = currentWebview.getStyle().titleNView;
if (tn) {
    uni.getSystemInfo({
        success: function(res) {
            if (res.platform == 'ios') {
                tn.searchInput.placeholder = this.keyword;
                currentWebview.setStyle({
                    titleNView: tn
                });
            } else {
                tn.searchInput.placeholder = this.keyword;
                currentWebview.setStyle({
                    titleNView: tn
                });
            }
        }
    });
}
H5端——DOM操作修改

JS模拟事件更新input：

function changeInput(dom, st) {
    var evt = new InputEvent('input', {
        inputType: 'insertText',
        data: st,
        dataTransfer: null,
        isComposing: false
    });
    dom.value = st;
    dom.dispatchEvent(evt);
}

修改一级搜索页面搜索框值value：

const page = document.querySelectorAll(".uni-input-input[type=search]")[0];
changeInput(page,this.keyword)

直接修改二级搜索页面搜索框的placeholder：

const page = document.querySelectorAll(".uni-input-input[type=search]")[0];
pages.placeholder = this.keyword;

需要注意的是，在H5端修改dom，要在onReady进行更新，否则会被实例的默认值覆盖。

总结

对比下来，虽然uni-app声称原生导航框具有更高的性能，所有样式集中在pages.json中让页面代码看似让template中的代码简洁许多。但是使用起来颇为复杂，一旦涉及到导航栏参数的修改，则需要调用各种API拿到参数值或者去修改参数值，对于不同端，还需要进行不同的操作。

而自定义导航栏，在动态设置方面给了很大的操作空间。同时，修改样式也更加简单。

所以，如果你的标题栏是静态配置的，那么原生导航栏是一个不错的选择；如果你需要对标题栏的内容进行任何程度的修改，那么还是建议使用自定义导航栏进行导航栏的开发。

引用

[1] uni-app导航栏开发指南

[2] uni-app 页面生命周期函数

[3] uni-app在App端动态修改原生导航栏

[4] HTML5 中国产业联盟 > API Reference > webview

uni-app导航栏自定义“返回按钮”多种方法设置原生返回
飙歌的博客
01-24 8300
方法一、 导航栏返回按钮事件。
uni-app自定义导航栏title-custom
04-10
2. 配合`<u-navbar>`组件：uni-app提供了`<u-navbar>`组件，它是基于原生导航栏进行封装的，可以实现更丰富的自定义功能。通过`title`属性设置标题，`left-text`和`right-text`设置左右按钮的文字，`fixed`属性设定...
uniapp 自定义微信小程序 tabBar 导航栏
sinat_35272898的博客
09-03 3628
使用微信小程序 custom-tab-bar 自定义 tabBar 导航栏的主要实现过程
Uniapp 自定义导航栏 自定义头部组件
peachban的博客
10-30 3776
uni-nav-bar 自定义导航栏基本用法属性名类型默认值说明titleString标题文字leftTextString左侧按钮文本rightTextString右侧按钮文本leftIconString左侧按钮图标（图标类型参考Icon 图标type 属性）rightIconString右侧按钮图标（图标类型参考Icon 图标type 属性）colorString#000000。
从零开始学UniApp微信小程序开发：头部适配技巧让你事半功倍！
最新发布
weixin_45734165的博客
09-20 353
在 index.vue 文件中，通过添加自定义头部组件和设置 padding-top 来实现头部自定义的适配。其中，padding-top: 44px 表示设置页面内容的顶部距离为头部的高度，确保内容不会被头部遮挡。在 pages.json 文件中，可以为每一个页面单独设置导航栏样式，具体的配置项是 navigationStyle。在 index.vue 文件中，可以通过添加自定义头部组件来实现头部的自定义。custom 表示隐藏小程序默认导航栏，自定义头部，可以通过 CSS 样式来设置头部的样式。
uniapp开发小程序端原生导航栏
baidu_41899377的博客
08-01 810
代码】uniapp开发小程序端原生导航栏。
uni-app使用自定义导航还是原生导航的
Black_snow_ji的博客
05-14 705
— 自定义导航 1.自定义导航就是自己写页面，在当前页面去写导航栏 <!-- 自定义导航位置 --> <!-- 页面需要的自定义导航 --> <!-- 页面 --> <!-- 货主 --> <view v-if="onStatus == 1"> <home v-if="index === 0" /> <news v-if="index === 1" /> <order v-if=
uniapp在App端如何动态修改原生导航栏？
Smile_ping的博客
10-18 952
uniapp 如何动态修改原生导航栏buttons配置？
uni-app开发app配置原生导航栏
webbirds的博客
06-28 681
我们在开发APP应用的时候，有些时候，我们在页面中会使用webview去引用其他页面，这样，自定义导航栏就会被webview的页面遮住，遇到此场景，我们需要配置pages.json，设置app原生导航栏去操作。
uniapp框架-uni-app自定义导航栏-uni-app项目源码-vue语法格式.zip
05-21
从多级选择器到自定义导航栏，再到二维码生成器，UniApp的控件封装合集为开发者提供了极大的便利。 面向未来，UniApp将继续优化性能，拓展功能，满足更多开发者的需求。如果你正在寻找一个高效、便捷的跨平台开发...
uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip
12-17
2. **自定义组件**：在uni-app中，可以通过创建自定义组件来扩展其原生能力，自定义底部导航栏就是其中一种常见实践。 3. **底部导航栏**：底部导航栏是应用界面设计中常见的元素，用于切换不同功能模块，通常包含3...
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
12-13
在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 ...
uni-app导航栏和状态栏配置
daoxiaofei的博客
11-25 5883
参考：官网uni-app导航栏开发指南。 1.1 原生导航栏-通用配置 (1) 原生导航优点 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。 原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。 (2) 原生导航缺点 原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。 (3) 原生导航栏的通用配置： uni-app 自带原生导航栏，在page.
uniapp自定义导航栏
葫芦娃y的博客
12-05 606
uniapp自定义头部导航栏
uniapp修改 原生 导航栏 / 原生 标题栏 的 按钮 文本修改 及 按钮 样式修改 支持 app-plus 支持 h5端 (按钮显示隐藏)
dalongee的博客
03-28 6176
uniapp修改 原生 导航栏 / 原生 标题栏 的 按钮 文本修改 及 按钮 样式修改 支持 app-plus 支持 h5端 (按钮显示隐藏)
uni-app导航栏开发指南
weixin_42017221的博客
02-17 2850
注意：按钮的点击事件需要在页面监听事件data() {return {}},console.log("点击了自定义按钮");"style": {}]buttons的text推荐使用字体图标。如果按钮使用的汉字或英文较长，推荐把字体改小一点，或者调节按钮宽度等值。配置button的背景颜色为透明：background:'rgba(0,0,0,0)'以上代码在hello uni-app的模板-顶部导航标题栏中有示例。
uni-app导航栏
YZRHANYU的博客
11-02 5138
uni-app导航栏
[保姆级教程]uniapp自定义导航栏
肥晨开发的学习之路
06-20 6843
在你的页面.vue文件中，使用或标签在页面顶部添加自定义的导航栏视图。这可以包括标题文本、返回按钮、搜索框等。
uniapp模拟导航栏，自定义导航栏的使用
u011608672的博客
03-16 1315
需求 在做uniAPP的时候，官方的导航栏不满足设计页面的需求，需要自定义才可以实现，于是就把原生的导航栏隐藏掉，自己来写导航栏来实现设计的自定义。 隐藏原生导航 只用个别的页面才需要自定义导航，所以我只在局部页面进行隐藏 局部页面隐藏 全局页面隐藏（一般用不到） ...
uni-app 获取导航栏title
07-28
在uni-app中，可以通过以下方式获取导航栏的标题： 1. 在页面的onLoad方法中，通过options参数获取到页面的标题，然后使用uni.setNavigationBarTitle方法设置导航栏的标题。代码示例如下： ``` onLoad(options) { uni.setNavigationBarTitle({ title: options.title }) } ``` 这样，在每个页面的onLoad方法中，都会自动获取到pages.json中配置的当前页面的标题，并设置为导航栏的标题。\[1\] 2. 另一种方式是通过pages.json配置文件来获取导航栏的标题。在pages.json中，可以为每个页面配置navigationBarTitleText属性，该属性的值就是对应页面的导航栏标题。这样，在每个页面中不需要手动设置导航栏标题，而是直接使用配置文件中的值。\[2\] 综上所述，uni-app可以通过onLoad方法中的options参数或者pages.json配置文件来获取导航栏的标题。 #### 引用[.reference_title] - *1* [uni-app自定义导航栏按钮以及事件、禁用原生导航栏](https://blog.csdn.net/lv_dn/article/details/126767792)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [UniApp 获取当前页面标题（navigationBarTitleText）](https://blog.csdn.net/zz00008888/article/details/126011805)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uni-app 原生导航栏、自定义导航栏的开发及修改](https://blog.csdn.net/weixin_45466186/article/details/107207873)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值