uniapp自定義小程序左上角的圖標並且添加自定義事件

項目中需要在左上角做一個按鈕，然后彈出框做搜索動作，成品如圖：

　　

 

 

 但是uniapp小程序端無法使用APP端的那種自定義方法，所以這里需要用到自定義頂部導航的方法：

1.pages.json中配置：

在需要添加自定義圖標的頁面的style中加一條屬性："navigationStyle": "custom" 目的是取消uniapp的原導航欄，使用自定義的導航欄

　　

 

 

 加上這一條的話數據這個頁面的頂部導航欄會消失，這時就要用到u-view組件庫的NavBar組件：

　　

 

2.添加自定義導航欄

 在數據頁面組件的頂部加上組件：

        <!-- 自定義頂部導航 -->
        <u-navbar class="self-nav" :is-back="false" title-color="white" :background="{background:'#39c4f6'}" title="數據">
            <text v-show="current===0" @click="popShowHandle" class="iconfont icon-shaixuan1"></text>
        </u-navbar>

 具體的屬性作用可查看官網說明：https://www.uviewui.com/components/navbar.html

中間text組件是放iconfont圖標，添加一個自定義事件即可。

這里如果需要的功能比較簡單，可以直接使用uniapp自帶的導航欄組件