如何用uni-app实现顶部导航栏显示按钮和搜索框
最近公司准备做app，最终决定使用uni-app框架开发，但是当把设计图给我的时候我心里有点没底，因为他的设计图顶部长成这个样子：
因为这个功能在小程序是根本无法实现的，可能受这个影响，我感觉好像实现不了，但是我还是回头看了看文档，才发现，这个功能是可以实现的，只需要在pages.json中做一些配置即可
这个在官方称作app-plus,可以自定义导航区域，具体配置如下：
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarBackgroundColor": "#00c170",
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [
{
"text": "地图",
"fontSize":"16",
"float": "right",
"color":"#fff"
},
{
"text": "唐山",
"fontSize":"16",
"float": "left",
"color":"#fff"
}
],
"searchInput":{
"align": "center",
"placeholder": "请输入查找房源信息",
"borderRadius":"50upx",
"backgroundColor": "#fff"
}
}
}
}
} ]
效果如下：
你可能会问，我的点击事件和输入框事件如何监听？
uni-app给出了相应的api,onNavigationBarButtonTap和onNavigationBarSearchInputChanged，写在响应的页面中即可：
export default {
onNavigationBarButtonTap() {
console.log("你点击了按钮")
},
onNavigationBarSearchInputChanged () {
console.log("你输入了信息")
}
}
打印结果：
但是按钮有两个，只有一个按钮事件怎么办？还有输入框的文字如何获取？其实这两个函数接收一个值，就是相对应的信息：
export default {
onNavigationBarButtonTap(val) {
console.log(val)
},
onNavigationBarSearchInputChanged (val) {
console.log(val)
}
}
打印结果：
按钮事件根据对应的text判断即可，而输入框监听的不是change事件，是input事件，即输入后即可监听到而不是失焦
你以为这就完了？NoNoNo,眼尖的同学发现我做的和设计图还是有区别的，右边地图有一个icon我没有写，如果按照上边的方法是不能加的，但是我们可以去掉导航栏自定义
page.json里每个页面的导航栏是默认开启的，有一个navigationStyle属性，默认值是default，我们把它改成custom就能把他去掉了：
{
"path": "pages/index/index",
"style": {
"navigationStyle":"custom"
}
但是移动端导航依然在，这就需要我们使用titleNView这个属性了，它是用来专门设置导航栏的，具体如下：
{
"path" : "pages/secondPage/secondPage",
"style" : {
"navigationStyle": "custom",
"app-plus": {
"titleNView": false
}
}
}
然后我们自己就可以写一套导航了，最后效果如下：
这里有一个坑，除了要给这个导航设置固定定位外，实际上手机最上方的状态栏，也就是这个位置是透明的，因为我们把默认的导航去掉了：
所以我们在写导航的时候上方的内边距是比下方的要大那么一点，这样才能保证覆盖状态栏。
下面是我写的源码：
<template>
<view class="head">
<view class="header-wrap">
<view class="index-header">
<text class="address" v-if="leftWords">{{leftWords}}</text>
<view class="input-wrap" v-if="input">
<input type="text"
placeholder="请输入搜索"
v-model="value"
@change="inputChange"/>
<text class="iconfont iconfangdajing"></text>
</view>
<view class="map-wrap"
v-if="rightWords||rightIcon"
@click="rightClick">
<text class="iconfont" :class="rightIcon"></text>
<text>{{rightWords}}</text>
</view>
</view>
</view>
<view class="blank"></view>
</view>
</template>
<script>
export default {
name: "IndexHeader",
props: [
'leftWords',
'input',
'rightIcon',
'rightWords'
],
data () {
return {
value: ''
}
},
methods: {
inputChange: function () {
this.$emit('change',this.value)
},
rightClick: function () {
this.$emit("rightClick")
}
}
}
</script>
<style lang="scss">
$color-base: #00c16f;
$words-color-base: #333333;
$words-color-light: #999999;
.header-wrap {
width: 100%;
position: fixed;
top: 0;
z-index: 999;
.index-header {
height: 88upx;
line-height: 88upx;
padding: 0 30upx;
padding-top: 40upx;
background-color: $color-base;
font-size: 28upx;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
.address {
font-size: 26upx;
}
.input-wrap {
width: 500upx;
height: 70upx;
padding: 10upx 30upx 10upx 100upx;
box-sizing: border-box;
background-color: #fff;
border-radius: 50upx;
color: $words-color-base;
position: relative;
text {
position: absolute;
left: 40upx;
top: -8upx;
color: $words-color-light;
font-size: 30upx;
}
}
.map-wrap {
.iconfont {
font-size: 32upx;
margin-right: 5upx;
}
text {
font-size: 26upx;
}
}
}
}
.blank {
height: 126upx;
}
</style>
以上就是如何用uni-app实现顶部导航栏显示按钮和搜索框的详细内容，更多关于用uni-app实现顶部导航栏显示按钮和搜索框的资料请关注脚本之家其它相关文章！
相关文章
js中forEach的用法之forEach与for之间的区别
这篇文章主要介绍了js中forEach的用法之forEach与for之间的区别，forEach() 调用数组的每个元素，并将元素传递给回调函数，下面更多详细介绍需要的小伙伴可以参考一下2022-03-03
下面小编就为大家带来一篇js中删除数组中的某一元素实例(无下标时)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了对js闭包理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了Js和JQuery获取鼠标指针坐标的实现代码分享,本文直接给出实现的代码,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了webpack的CSS加载器的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
JavaScript中break、continue和return的用法区别实例分析
这篇文章主要介绍了JavaScript中break、continue和return的用法区别,结合实例形式详细对比分析了JavaScript中break、continue和return的基本功能、使用方法、区别与操作注意事项,需要的朋友可以参考下2020-03-03
可能很多朋友认为undefined是在js中未定义变量时才会提示的错误,其实不然undefined 是js中的一特殊的变量,我们也可以提前定义哦,下面这篇文章主要给大家介绍了关于js中undefined该怎么判断的相关资料,需要的朋友可以参考下2023-04-04
利用javascript移动div层-javascript 拖动层
利用javascript开发在界面上随意拖动以下html code中的div层2009-03-03
这篇文章主要介绍了JS+CSS实现的竖向简洁折叠菜单效果代码,涉及JavaScript链式操作与元素遍历等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了JS实现的四叉树算法,简单分析了四叉树的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下2018-12-12
最新评论