您好,登錄后才能下訂單哦!
這篇文章主要講解了“uniapp開發(fā)微信小程序如何自定義頂部導(dǎo)航欄功能”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“uniapp開發(fā)微信小程序如何自定義頂部導(dǎo)航欄功能”吧!
使用uniapp開發(fā)小程序,在不同界面,要去對(duì)頁面進(jìn)行修改頂部導(dǎo)航欄。
比如說要去定義導(dǎo)航欄的背景顏色,常規(guī)的去定義導(dǎo)航欄背景顏色
全局定義導(dǎo)航欄
"window": { "navigationBarBackgroundColor": "#32A2FD", // 頂部背景顏色 "navigationBarTitleText": "123456", // 頂部文字 "navigationStyle": "default", // 是否自定義導(dǎo)航欄,當(dāng)"default"為"custom"時(shí)開啟自定義頭部導(dǎo)航欄選項(xiàng) "navigationBarTextStyle": "white", // 頂部文字顏色 僅支持 white/black },
單頁面定義導(dǎo)航欄
"path": "pages/cargo/pickUpGoods",//頁面路徑 "style": { "navigationBarTitleText": "uni-app", // 頂部文字 "navigationBarBackgroundColor": "#fff", // 頂部背景顏色 "navigationBarTextStyle": "black" // 頂部文字顏色 }
踩坑,開始我以為把頂部導(dǎo)航欄的顏色換成漸變的就可以了,但是不行
查了之后才知道,設(shè)置漸變色要去自定義背景顏色
首先 如果是全部頁面就在window里面添加,如果是單頁面就在頁面添加
"navigationStyle": "custom"
"path": "pages/cargo/shipments", "style": { "navigationBarTitleText": "uni-app", "navigationStyle": "custom",//設(shè)置自定義導(dǎo)航欄 }
然后,自己封裝一個(gè)組件,
<template> <view class="prohibition"> <view class="demo" :> <!-- 左側(cè)返回按鈕 --> <view class="left" @click="onBack" v-if="back" :> <uni-icons type="arrowleft" size="30" :color='color'></uni-icons> <!-- 此處圖標(biāo)使用的是 uni-ui圖標(biāo) --> </view> <!-- 中間標(biāo)題文字 --> <view class="title"> {{title}} </view> </view> </view> </template> <script> export default { data() { return { height: 0, paddingTop: 0, } }, // props: ["title", "back"], props:{ title:{ // 標(biāo)題文字(默認(rèn)為空) type:String, default:'' }, color:{ // 標(biāo)題和返回按鈕顏色(默認(rèn)白色) type:String, default:'#fff' }, //建議使用background 因?yàn)槭褂胋ackgroundColor,會(huì)導(dǎo)致不識(shí)別漸變顏色 background:{ // 背景顏色(不傳值默認(rèn)透明) type:String, default:'transparent' }, back:{ // 是否顯示返回按鈕(不傳值默認(rèn)不顯示) type:Boolean, default:false }, }, created() { const demo = uni.getMenuButtonBoundingClientRect() this.height = demo.height + "px" this.paddingTop = demo.top + "px" }, methods: { // 左側(cè)返回按鈕調(diào)用 onBack() { this.$emit("onBack") } } } </script> <style lang="less"> .demo { position: relative;//注意,建議使用相對(duì)定位,因?yàn)楣潭ǘㄎ粫?huì)脫離文檔流,然后你還要去設(shè)置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>
然后,引入你的這個(gè)組件,寫在頁面的最上面
代碼在這里
<navbar class="header" :background="backgroundColor" back :title="title" @onBack="goBack"></navbar>
引入組件,使用
1.在阿里巴巴矢量圖選擇自己喜歡的圖標(biāo),然后點(diǎn)擊收藏
2.右上角下載全部已經(jīng)收藏了的圖標(biāo)
3.在編輯器打開已經(jīng)下載的文件,把文件里的iconfont.ttf丟到static文件夾里,然后再打開iconfont.css里查看unicode編碼
4.最后把對(duì)應(yīng)圖標(biāo)的編碼填寫到page.json的配置項(xiàng)里text,需要寫成一個(gè)"\u***",然后重啟就實(shí)現(xiàn)了
5.最后在對(duì)應(yīng)的頁面生命周期方法里填寫,通過e.index,來配置不同的方法
onNavigationBarButtonTap:function(e){ console.log(JSON.stringify(e)) },
感謝各位的閱讀,以上就是“uniapp開發(fā)微信小程序如何自定義頂部導(dǎo)航欄功能”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)uniapp開發(fā)微信小程序如何自定義頂部導(dǎo)航欄功能這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。