uniapp開發微信小程序自定義頂部導航欄功能實例
自定義導航欄漸變色,先上效果
使用uniapp開發小程序,在不同界面,要去對頁面進行修改頂部導航欄。
比如說要去定義導航欄的背景顏色,常規的去定義導航欄背景顏色
全局定義導航欄
"window": { "navigationBarBackgroundColor": "#32A2FD", // 頂部背景顏色 "navigationBarTitleText": "123456", // 頂部文字 "navigationStyle": "default", // 是否自定義導航欄,當"default"為"custom"時開啟自定義頭部導航欄選項 "navigationBarTextStyle": "white", // 頂部文字顏色 僅支持 white/black },
單頁面定義導航欄
"path": "pages/cargo/pickUpGoods",//頁面路徑 "style": { "navigationBarTitleText": "uni-app", // 頂部文字 "navigationBarBackgroundColor": "#fff", // 頂部背景顏色 "navigationBarTextStyle": "black" // 頂部文字顏色 }
重點來瞭,導航欄設置漸變色
踩坑,開始我以為把頂部導航欄的顏色換成漸變的就可以瞭,但是不行
查瞭之後才知道,設置漸變色要去自定義背景顏色
首先 如果是全部頁面就在window裡面添加,如果是單頁面就在頁面添加
"navigationStyle": "custom"
"path": "pages/cargo/shipments", "style": { "navigationBarTitleText": "uni-app", "navigationStyle": "custom",//設置自定義導航欄 }
然後,自己封裝一個組件,
<template> <view class="prohibition"> <view class="demo" :style="[{background},{color},{height},{paddingTop}]"> <!-- 左側返回按鈕 --> <view class="left" @click="onBack" v-if="back" :style="[{color},{paddingTop}]"> <uni-icons type="arrowleft" size="30" :color='color'></uni-icons> <!-- 此處圖標使用的是 uni-ui圖標 --> </view> <!-- 中間標題文字 --> <view class="title"> {{title}} </view> </view> </view> </template> <script> export default { data() { return { height: 0, paddingTop: 0, } }, // props: ["title", "back"], props:{ title:{ // 標題文字(默認為空) type:String, default:'' }, color:{ // 標題和返回按鈕顏色(默認白色) type:String, default:'#fff' }, //建議使用background 因為使用backgroundColor,會導致不識別漸變顏色 background:{ // 背景顏色(不傳值默認透明) type:String, default:'transparent' }, back:{ // 是否顯示返回按鈕(不傳值默認不顯示) type:Boolean, default:false }, }, created() { const demo = uni.getMenuButtonBoundingClientRect() this.height = demo.height + "px" this.paddingTop = demo.top + "px" }, methods: { // 左側返回按鈕調用 onBack() { this.$emit("onBack") } } } </script> <style lang="less"> .demo { position: relative;//註意,建議使用相對定位,因為固定定位會脫離文檔流,然後你還要去設置marginTop值 // position: fixed; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 26rpx; z-index: 100; padding-bottom: 10rpx; .left { float: left; position: absolute; width: 100rpx; height: 50rpx; top: 0; bottom: 0; left: 20rpx; color: #fff; margin: auto; } .title { font-size: 36rpx; font-family: Source Han Sans CN; // color: #FFFFFF; } } </style>
然後,引入你的這個組件,寫在頁面的最上面
代碼在這裡
<navbar class="header" :background="backgroundColor" back :title="title" @onBack="goBack"></navbar>
引入組件,使用
補充:更換圖標
1.在阿裡巴巴矢量圖選擇自己喜歡的圖標,然後點擊收藏
2.右上角下載全部已經收藏瞭的圖標
3.在編輯器打開已經下載的文件,把文件裡的iconfont.ttf丟到static文件夾裡,然後再打開iconfont.css裡查看unicode編碼
4.最後把對應圖標的編碼填寫到page.json的配置項裡text,需要寫成一個"\u***",然後重啟就實現瞭
5.最後在對應的頁面生命周期方法裡填寫,通過e.index,來配置不同的方法
onNavigationBarButtonTap:function(e){ console.log(JSON.stringify(e)) },
踩瞭很多坑,制作不易。
總結
到此這篇關於uniapp開發微信小程序自定義頂部導航欄的文章就介紹到這瞭,更多相關uniapp自定義頂部導航欄內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 微信小程序自定義漸變的tabbar導航欄功能
- 微信小程序自定義膠囊樣式
- 微信小程序自定義導航的方法
- uniapp微信小程序自定義導航欄的全過程
- uniapp vue與nvue輪播圖之輪播圖組件的示例代碼