uni-app自定義導航欄按鈕|uniapp仿微信頂部導航條

時間 2019-11-11

標籤 uni app 自定義導航按鈕 uniapp 微信頂部简体版

原文原文鏈接

最近一直在學習uni-app開發，因爲uniapp是基於vue.js技術開發的，只要你熟悉vue，基本上很快就能上手了。html

在開發中發現uni-app原生導航欄也能實現一些頂部自定義按鈕+搜索框，只需在page.json裏面作一些配置便可。設置app-plus，配置編譯到App平臺的特定樣式。dcloud平臺對app-plus作了詳細說明：app-plus配置，需注意目前暫支持H五、App端，不支持小程序。vue

在page.json裏配置app-plus便可android

{
    "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":{
                    ...
                }
            }
        }
    }
},

對於如何監聽按鈕、輸入框事件，uni-app給出了相應API，只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged，寫在響應的頁面中便可。json

那如何能夠實現像京東、淘寶、微信頂部導航欄，如加入城市定位、搜索、自定圖片/圖標、圓點提示。。。小程序

上面的方法是能夠知足通常項目需求，可是在小程序裏則失效了，並且一些複雜的導航欄就不能很好兼顧，這時只能尋求其它替代方法了微信

將navigationStyle設爲custom或titleNView設爲false時，原生導航欄不顯示，這時就能自定義導航欄app

"globalStyle": { "navigationStyle": "custom" }學習

下面是簡單測試實例：測試

這裏要注意的是，H五、小程序、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
        }
    })
},

嘖嘖嘖，看下面的效果，是否是以爲很眼熟，沒錯，就是基於uni-app簡單的實現了一個仿微信頂部導航條

頂部的圖標使用iconfont字體圖標、另外還可自定傳入圖片

<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="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" title="個人" titleTintColor="#fff" :bgColor="{background: '#353535'}">
    <text slot="back" class="uni_btnIco iconfont icon-close"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-search"></text>
    <text slot="string" class="uni_btnString" style="color: #2B9939;">添加好友</text>
</header-bar>

支持傳入的屬性，另外還用到了vue插槽slot

/***
　　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>