如何用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实现顶部导航栏显示按钮和搜索框的资料请关注我们其它相关文章!

时间: 2021-06-04

使用 UniApp 实现小程序的微信登录功能

1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息 获取成功,则说明已经授权过了,直接登录成功 获取失败,则说明没有授权过,需要授权之后才能进行登录 用户点击页面

uniapp实现横向滚动选择日期

本文实例为大家分享了uniapp实现横向滚动选择日期的具体代码,供大家参考,具体内容如下 1.方法封装 common.js //获取当前时间,格式YYYY-MM-DD HH:MM:SS const GetNowTime = time => { var date = time, year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours() < 10 ? &q

uniapp实现可以左右滑动导航栏

本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码,供大家参考,具体内容如下 <template> <view> <home-view></home-view> <view class="content-box" :id="isScale?'content-box-too':''"> <view class="nav-head-box top-nav-fixed">

uniapp与webview之间的相互传值的实现

1.uni-app 如何发送数据到 H5? 其实很接单.在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中: <template> <view class="advertisement" style="width: 100%;"> <web-view :src="url" @message="message"></web-view>

uniapp实现可滑动选项卡

本文实例为大家分享了uniapp实现可滑动选项卡的具体代码,供大家参考,具体内容如下 tabControl-tag.vue <template name="tabControl"> <scroll-view scroll-x="true" :style="'background-color:'+bgc+';top:'+top+'px;'" :class="fixed?'fxied':''" :scroll-l

uniapp,微信小程序中使用 MQTT的问题

最近在uniapp打包成微信小程序的项目中第一次用到了MQTT.使用比较简单,但是还是遇到了一些问题.在此记录一下. 官方文档:MQTT Github 官方MQTT测试工具:MQTTX.测试工具使用说明 MQTT的js文件:mqtt.min.js 先上一点注意事项: (1)MQTT.js 一个 MQTT 协议的客户端库,用 JavaScript 编写,可用于 Node.js 和浏览器.在 Node.js 端可以通过全局安装使用命令行连接,同时还支持 MQTT ,MQTT TLS 证书连接:值得一

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

uni app仿微信顶部导航条功能

最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

uniapp 仿微信的右边下拉选择弹出框的实现代码

在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件 这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单 这里首先用一个单独的页面存放这个组件 <template> //这里是搜索框的输入框 不需要的可以删掉 <view> <view class="arrivalSearch"> <view class="arrivalSmallsearch"> <view class="arriv

Android 高仿微信支付数字键盘功能

现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定义布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

iOS高仿微信文章悬浮球功能

前言 微信在最新版本6.6.7,新加了一个文章悬浮球功能.当你正在阅读文章的时候,突然有好友发来了紧急消息,你需要立即回复.又或者你刚好路过小吃店,需要临时打开微信支付,等等临时中断阅读的情况.以前只有退出文章详情页面,处理完事情之后,再挨着挨着找到原来的文章.对于我们这种重度微信使用者来说,每次遭遇这种情况,真的很蛋疼.所以,当这个功能推出的事情,立马更新了最新版本,这个功能感觉就像遇到了知心人一样,用起来十分顺手.可以通过下面的动图感受一下 其实悬浮球的概念早就有了.比如360助手的流量监控

Vue.js仿微信聊天窗口展示组件功能

源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍 支持文本和图片的展示(后续将

Android仿微信右滑返回功能的实例代码

先上效果图,如下: 先分析一下功能的主要技术点,右滑即手势判断,当滑到一直距离时才执行返回,并且手指按下的位置是在屏幕的最左边(这个也是有一定范围的),  这些可以实现onTouchEvent来实现. 接着就是返回时,有滑动效果,很显然这个是Acitivty切换动画实现的.好啦,分析完了就开干.下面上代码: @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){ case Mot

iOS应用开发中导航栏按钮UIBarButtonItem的添加教程

1.UINavigationController导航控制器如何使用 UINavigationController可以翻译为导航控制器,在iOS里经常用到. 我们看看它的如何使用: 下面的图显示了导航控制器的流程.最左侧是根视图,当用户点击其中的General项时 ,General视图会滑入屏幕:当用户继续点击Auto-Lock项时,Auto-Lock视图将滑入屏幕.相应地,在对象管理上,导航控制器使用了导航堆栈.根视图控制器在堆栈最底层,接下来入栈的是General视图控制器和Auto-Lock

Android项目实战之仿网易顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候想网易新闻要显示的内容太多,而且又想在主页面全部显示出来,所以有加了顶部导航栏,但是Android这样的移动设备内存是受限的,那么多界面缓存到内存中,很容易导致内存溢出,这个是比较致命的,所以不得不考虑.虽然我在之前也做过网易的顶部导航栏但是方式并不好,就像使用viewpager做一些复杂的界面由于图片占用内存过多,很容易导致内存溢出,学习了今天的内容大家做一下对比相信

Android仿新闻顶部导航标签切换效果

最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo.具体看下图. 那么大致上我们会用到这些知识. 1.Fragment 2.FragmentPagerAdapter 3.HorizontalScrollView 4.PopupWindow ok,那么首先进入第一步. 为了实现顶部的标签,我们要用到HorizontalScrollView,因为原有的HorizontalScrollView控件已经不能满足我们的使用了.所以这里就自定义一个HorizontalScrollView impor