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

来源:https://www.cnblogs.com/xiaoyan2017/archive/2019/09/17/11531238.html
-Advertisement-
Play Games

最近一直在學習uni-app開發，由於uniapp是基於vue.js技術開發的，只要你熟悉vue，基本上很快就能上手了。 在開發中發現uni-app原生導航欄也能實現一些頂部自定義按鈕+搜索框，只需在page.json裡面做一些配置即可。設置app-plus，配置編譯到App平臺的特定樣式。dclo ...


最近一直在學習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": "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，寫在響應的頁面中即可。

 

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

上面的方法是可以滿足一般項目需求，但是在小程式里則失效了，而且一些複雜的導航欄就不能很好兼顧，這時只能尋求其它替代方法了

將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
        }
    })
},

嘖嘖嘖，看下麵的效果，是不是覺得很眼熟，沒錯，就是基於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>

最後附上一個基於ReactNative實現的自定義導航條的聊天室項目

https://www.cnblogs.com/xiaoyan2017/p/11441285.html

另外後續準備使用uni-app技術也做一個實戰聊天項目，屆時也會分享出來。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Mysql存儲過程--大於十分鐘執行
    --存儲過程 DELIMITER | DROP PROCEDURE IF EXISTS update_tatus | CREATE PROCEDURE update_status() BEGIN IF exists (select id from status_his where status = ... ...
  • [大數據學習研究]2.利用VirtualBox模擬Linux集群
    1. 在主機Macbook上設置HOST 前文書已經把虛擬機的靜態IP地址設置好，以後可以通過ip地址登錄了。不過為了方便，還是設置一下，首先在Mac下修改hosts文件，這樣在ssh時就不用輸入ip地址了。 sudo vim /etc/hosts 或者 sudo vim /private/etc/ ...
  • Kafka運維命令大全
    1、集群管理 前臺啟動broker Ctrl + C 關閉 後臺啟動broker 關閉broker 2、Topic管理 創建topic 刪除topic 查詢topic列表 查詢topic詳情 修改topic 3、Consumer Groups管理 查詢消費者組 查詢消費者組詳情 重設消費者組位移 刪 ...
  • 神奇的 SQL 之層級 → 為什麼 GROUP BY 之後不能直接引用原表中的列
    前言 開心一刻 感覺不妙呀，弟弟舔它！ 不該舔的，舔到懷疑人生了...... GROUP BY 後 SELECT 列的限制 標準 SQL 規定，在對錶進行聚合查詢的時候，只能在 SELECT 子句中寫下麵 3 種內容：通過 GROUP BY 子句指定的聚合鍵、聚合函數（SUM 、AVG 等）、常量。 ...
  • MySQL存儲引擎介紹 w
    一 存儲引擎解釋 首先確定一點，存儲引擎的概念是MySQL裡面才有的，不是所有的關係型資料庫都有存儲引擎這個概念，後面我們還會說，但是現在要確定這一點。 在講清楚什麼是存儲引擎之前，我們先來個比喻，我們都知道錄製一個視頻文件，可以轉換成不同的格式，例如mp4，avi，wmv等，而存在我們電腦的磁碟上 ...
  • MySQL的安裝與配置——詳細教程
    免安裝版的Mysql MySQL關是一種關係資料庫管理系統，所使用的 SQL 語言是用於訪問資料庫的最常用的 標準化語言，其特點為體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，在 Web 應用方面 MySQL 是最好的 RDBMS(Relational Database Managemen ...
  • Android utils 之 日誌工具類
    工具類 在開發的過程中，我們時常會對代碼執行特定的處理，而這部分處理在代碼中可能多次用到，為了代碼的統一性、規範性等，通過建工具類的方式統一處理。接下來我會羅列各種工具類。 日誌工具類 在utils文件夾下建立一個 LogUtils 類 在build.gradle中配置buildType，設置不同版 ...
  • MTK Recovery 模式橫屏修改(適用於6.0 + 8.1)
    修改前 修改後 6.0 Recovery 模式橫屏修改方法 修改相關文件 bootable\recovery\minui\Android.mk bootable\recovery\minui\mt_graphic_rotate.cpp bootable\recovery\minui\mt_graph ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類