欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp開發(fā)微信小程序自定義頂部導(dǎo)航欄功能實(shí)例

 更新時(shí)間：2022年08月06日 14:08:07   作者：走出半生的少年  
uni-app是一個(gè)使用Vue.js開發(fā)跨平臺(tái)應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)微信小程序自定義頂部導(dǎo)航欄功能的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

自定義導(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" // 頂部文字顏色
 
}

重點(diǎn)來了，導(dǎo)航欄設(shè)置漸變色

踩坑，開始我以為把頂部導(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" :style="[{background},{color},{height},{paddingTop}]">
			<!-- 左側(cè)返回按鈕 -->
			<view class="left" @click="onBack" v-if="back" :style="[{color},{paddingTop}]">
				<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>

引入組件，使用

補(bǔ)充：更換圖標(biāo)

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

踩了很多坑，制作不易。

總結(jié)

到此這篇關(guān)于uniapp開發(fā)微信小程序自定義頂部導(dǎo)航欄的文章就介紹到這了,更多相關(guān)uniapp自定義頂部導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論