uni-app自定义导航栏按钮|uniapp仿微信顶部导航条_温瞳_前端开发者

uniApp原生导航栏

uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可。设置app-plus,dcloud平台对app-plus做了详细说明:app-plus配置,不过目前暂支持H5、App端,不支持小程序。

app-plus配置

 

 

 

 在page.json里配置app-plus即可

 

{
    "path": "pages/ucenter/index",
    "style": {
        "navigationBarTitleText": "我的",
        "app-plus": {
            "titleNView": {
                "buttons": [
                    {
                        "text": "\ue670",
                        "fontSrc": "/static/iconfont.ttf",
                        "fontSize": "22px",
                        "float": "left"
                    },
                    {
                        "text": "\ue62c",
                        "fontSrc": "/static/iconfont.ttf",
                        "fontSize": "22px"
 
                    }
                ],
                "searchInput":{
                    ...
                }
            }
        }
    }
},
{
    "path": "pages/ucenter/index",
    "style": {
        "navigationBarTitleText": "我的",
        "app-plus": {
            "titleNView": {
                "buttons": [
                    {
                        "text": "\ue670",
                        "fontSrc": "/static/iconfont.ttf",
                        "fontSize": "22px",
                        "float": "left"
                    },
                    {
                        "text": "\ue62c",
                        "fontSrc": "/static/iconfont.ttf",
                        "fontSize": "22px"
 
                    }
                ],
                "searchInput":{
                    ...
                }
            }
        }
    }
},

{
pathpages/ucenter/index,
style: {
navigationBarTitleText我的,
app-plus: {
titleNView: {
buttons: [
{
text\ue670,
fontSrc/static/iconfont.ttf,
fontSize22px,
floatleft
},
{
text\ue62c,
fontSrc/static/iconfont.ttf,
fontSize22px

}
],
searchInput:{

}
}
}
}
},

那么如何监听按钮、输入框事件? uni-app给出了相应API,只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged,写在相应的页面中即可。

uniApp自定义导航栏

uniApp自定义导航栏uniApp自定义导航栏

如何实现像淘宝、微信顶部导航栏,支持标题居左、居中、搜索条、按钮自定义。。。

将navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,这时就能自定义导航栏

` “globalStyle”: { “navigationStyle”: “custom” } `

具体效果实例如下:

 

 

 这里要注意的是,H5、小程序、App端状态栏都不一样,需要重新计算处理,我这里已经处理好了,可直接使用,在App.vue里面设置即可

onLaunch: function() {
    uni.getSystemInfo({
        success:function(e){
            vue.prototype.statusBar = e.statusBarHeight
            // #ifndef MP
            if(e.platform == 'android') {
                vue.prototype.customBar = e.statusBarHeight + 50
            }else {
                vue.prototype.customBar = e.statusBarHeight + 45
            }
            // #endif
            
            // #ifdef MP-WEIXIN
            let custom = wx.getMenuButtonBoundingClientRect()
            vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
            // #endif
            
            // #ifdef MP-ALIPAY
            vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
            // #endif
        }
    })
},
onLaunch: function() {
    uni.getSystemInfo({
        success:function(e){
            vue.prototype.statusBar = e.statusBarHeight
            // #ifndef MP
            if(e.platform == 'android') {
                vue.prototype.customBar = e.statusBarHeight + 50
            }else {
                Vue.prototype.customBar = e.statusBarHeight + 45
            }
            // #endif
            
            // #ifdef MP-WEIXIN
            let custom = wx.getMenuButtonBoundingClientRect()
            Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
            // #endif
            
            // #ifdef MP-ALIPAY
            Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
            // #endif
        }
    })
},

onLaunch: function() {
uni.getSystemInfo({
success:function(e){
Vue.prototype.statusBar
e.statusBarHeight
// #ifndef MPifandroid) {
Vue.prototype.customBar
50
}
else {
Vue.prototype.customBar
45
}
// #endif

// #ifdef MP-WEIXIN wx.getMenuButtonBoundingClientRect()
Vue.prototype.customBar
e.statusBarHeight
// #endif

// #ifdef MP-ALIPAY e.titleBarHeight
// #endif }
})
},

 

<header-bar :isBack="false" title="标题信息" titleTintColor="#fff">
    <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-search" @tap="aaa"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-tianjia" @tap="bbb"></text>
    <!-- <text slot="string" class="uni_btnString" @tap="ccc">添加好友</text> -->
    <image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>
</header-bar>
<header-bar :isBack="false" title="标题信息" titleTintColor="#fff">
    <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-search" @tap="aaa"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-tianjia" @tap="bbb"></text>
    <!-- <text slot="string" class="uni_btnString" @tap="ccc">添加好友</text> -->
    <image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>
</header-bar>

false标题信息#fffbackclassuni_btnIco iconfont icon-arrLiconfontclassuni_btnIco iconfont icon-searchaaaiconfontclassuni_btnIco iconfont icon-tianjiabbbstringclassuni_btnStringcccimageclassuni_btnImage../../static/logo.pngwidthFixddd

 

 

 

 

 

 

 

<header-bar :isBack="true" titleTintColor="#fff" :bgColor="{'background-image': 'linear-gradient(45deg, #007AFF 10%, #005cbf)'}" search>
    <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-choose03" @tap="aaa"></text>
    <image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>
</header-bar>
<header-bar :isBack="true" titleTintColor="#fff" :bgColor="{'background-image': 'linear-gradient(45deg, #007AFF 10%, #005cbf)'}" search>
    <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-choose03" @tap="aaa"></text>
    <image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>
</header-bar>

true#fff{‘background-image’: ‘linear-gradient(45deg, #007AFF 10%, #005cbf)’}backclassuni_btnIco iconfont icon-arrLiconfontclassuni_btnIco iconfont icon-choose03aaaimageclassuni_btnImage../../static/logo.pngwidthFixddd

 

 

 

 

 

 

 

 

 

 

 

 支持传入的属性,另外还用到了vue插槽slot

/***
  isBack              是否返回按钮
  title               标题
  titleTintColor      标题颜色
  bgColor             背景
  center              标题居中
  search              搜索条
  searchRadius        圆形搜索条
  fixed               是否固定
*/
/***
  isBack              是否返回按钮
  title               标题
  titleTintColor      标题颜色
  bgColor             背景
  center              标题居中
  search              搜索条
  searchRadius        圆形搜索条
  fixed               是否固定
*/

/***
  isBack 是否返回按钮
  title 标题
  titleTintColor 标题颜色
  bgColor 背景
  center 标题居中
  search 搜索条
  searchRadius 圆形搜索条
  fixed 是否固定
*/

 

 

<template>
    <view class="uni_topbar" :style="style">
        <view class="inner flexbox flex_alignc" :class="[fixed ? 'fixed' : '']" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]">
            <!-- 返回 -->
            <!-- <text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text> -->
            <view v-if="isBack" @tap="goBack">
                <slot name="back"></slot>
            </view>
            <slot name="headerL"></slot>
            <!-- 标题 -->
            <!-- #ifndef MP -->
            <view class="flex1" v-if="!search && center"></view>
            <!-- #endif -->
            <view class="uni_title flex1" :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title">
                {{title}}
            </view>
            <view class="uni_search flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />
                <input class="uni_searchIpt flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />
            </view>
            <!-- 右侧 -->
            <view class="uni_headerRight flexbox flex_row flex_alignc">
                <slot name="iconfont"></slot>
                <slot name="string"></slot>
                <slot name="image"></slot>
            </view>
        </view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                statusBarH: this.statusBar,
                customBarH: this.customBar
            }
        },
        props: {
            isBack: { type: [Boolean, String], default: true },
            title: { type: String, default: '' },
            titleTintColor: { type: String, default: '#fff' },
            bgColor: Object,
            center: { type: [Boolean, String], default: false },
            search: { type: [Boolean, String], default: false },
            searchRadius: { type: [Boolean, String], default: false },
            fixed: { type: [Boolean, String], default: false },
        },
        computed: {
            style() {
                let _style = `height: ${this.customBarH}px;`
                return _style
            }
        },
        methods: {
            goBack() {
                uni.navigateBack()
            }
        }
    }
</script>
<template>
    <view class="uni_topbar" :style="style">
        <view class="inner flexbox flex_alignc" :class="[fixed ? 'fixed' : '']" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]">
            <!-- 返回 -->
            <!-- <text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text> -->
            <view v-if="isBack" @tap="goBack">
                <slot name="back"></slot>
            </view>
            <slot name="headerL"></slot>
            <!-- 标题 -->
            <!-- #ifndef MP -->
            <view class="flex1" v-if="!search && center"></view>
            <!-- #endif -->
            <view class="uni_title flex1" :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title">
                {{title}}
            </view>
            <view class="uni_search flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />
                <input class="uni_searchIpt flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />
            </view>
            <!-- 右侧 -->
            <view class="uni_headerRight flexbox flex_row flex_alignc">
                <slot name="iconfont"></slot>
                <slot name="string"></slot>
                <slot name="image"></slot>
            </view>
        </view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                statusBarH: this.statusBar,
                customBarH: this.customBar
            }
        },
        props: {
            isBack: { type: [Boolean, String], default: true },
            title: { type: String, default: '' },
            titleTintColor: { type: String, default: '#fff' },
            bgColor: Object,
            center: { type: [Boolean, String], default: false },
            search: { type: [Boolean, String], default: false },
            searchRadius: { type: [Boolean, String], default: false },
            fixed: { type: [Boolean, String], default: false },
        },
        computed: {
            style() {
                let _style = `height: ${this.customBarH}px;`
                return _style
            }
        },
        methods: {
            goBack() {
                uni.navigateBack()
            }
        }
    }
</script>

classuni_topbarstyleclassinner flexbox flex_aligncclass[fixed ? ‘fixed’ : ”][{‘height’: customBarH + ‘px’, ‘padding-top’: statusBarH + ‘px’, ‘color’: titleTintColor}, bgColor]classuni_icoBack iconfont icon-arrLifisBackgoBackifisBackgoBackbackheaderLclassflex1if!search && center#endifclassuni_title flex1class[center ? ‘uni_titleCenter’ : ”][isBack ? {‘font-size’: ’32upx’, ‘padding-left’: ‘0’} : ”]if!search && title
{{title}}
classuni_search flex1class[searchRadius ? ‘uni_searchRadius’ : ”]ifsearchclassuni_searchIpt flex1text搜索color: rgba(255,255,255,.5);classuni_headerRight flexbox flex_row flex_alignciconfontstringimage
export
default {
data() {
return {
statusBarH:
this.statusBar,
customBarH:
this.customBar
}
},
props: {
isBack: { type: [Boolean, String],
defaulttrue },
title: { type: String,
default },
titleTintColor: { type: String,
default#fff },
bgColor: Object,
center: { type: [Boolean, String],
defaultfalse },
search: { type: [Boolean, String],
defaultfalse },
searchRadius: { type: [Boolean, String],
defaultfalse },
fixeddefaultfalse },
},
computed: {
style() {
let _style
this.customBarH}px;`
return _style
}
},
methods: {
goBack() {
uni.navigateBack()
}
}
}

 

 

转载CSDN博主「xiaoyan_2018」的原创文章。
原文链接:https://blog.csdn.net/yanxinyun1990/article/details/100919657

 

» 本文来自:前端开发者 » 《uni-app自定义导航栏按钮|uniapp仿微信顶部导航条_温瞳_前端开发者》
» 本文链接地址:https://www.rokub.com/73245.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!