前言

微信小程序原生頁面導航欄，無法進行自定義交互，如想實現(xiàn)類似下圖的效果，就得使用自定義導航欄這里使用到uView的組件u-navbar。

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、了解微信小程序頁面導航欄

• 導航欄樣式分為兩種 default/custom，custom即取消默認的原生導航，默認為default。
• 原生導航欄支持設(shè)置標題內(nèi)容、背景顏色、其他交互效果無法實現(xiàn)。
• 設(shè)置custom取消導航欄，就可以自定義導航欄。

	"pages": [{
		"path": "pages/index",
		"style": {
			// 取消導航欄
			"navigationStyle": "custom"
		}
	}, {
		"path": "pages/myselfs",
		"style": {
			// 頁面標題
			"navigationBarTitleText": "個人中心",
			// 導航欄背景顏色
			"navigationBarBackgroundColor": "#ffffff"
		}
	}]

二、效果圖實現(xiàn)

• 使用uView的u-navbar組件
• 通過v-if根據(jù)opacity判斷顯示的內(nèi)容

HTML:

<template>
	<view class="page">
		<u-navbar height="44" title-size="36" title-bold title-color="#ffffff" :is-back="false" :background="background" :border-bottom="false">
			<!--標題-->
			<view class="slot-wrap" v-if="opacity < 0.5">
				<text class="title">Test·我是標題</text>
			</view>
			<!--輸入框-->
			<view class="slot-wrap" v-if="opacity > 0.5">
				<u-search placeholder="搜索你感興趣的" :action-style="{color: '#ffffff'}" v-model="keyword"></u-search>
			</view>
		</u-navbar>
	</view>
</template>

• 計算透明度顯示下滑頁面時的背景色（效果圖下滑頁面時展示的顏色）
• 監(jiān)聽頁面滾動，計算并賦值給透明度字段

JS：

data() {
	return {
		// 導航欄透明度
		opacity: 0,
		// 輸入框綁定的值
		keyword: '',
		// 默認背景顏色
		background: {
			backgroundColor: 'rgba(0, 0, 0, 0)'
		}
	}
},
// 計算透明度顯示下滑頁面時的背景色（效果圖下滑頁面時展示的顏色）
computed: {
	backgroundColor() {
		this.background.backgroundColor = `rgba(123,104,238,${this.opacity})`
	}
},
// 監(jiān)聽頁面滾動，計算并賦值給透明度字段
onPageScroll(e) {
	let topRate = (e.scrollTop / 100).toFixed(2)
	if (topRate > 1) {topRate = 1}
	this.opacity = topRate
}

CSS：

.slot-wrap {
	flex: 1;
	margin: 0 20rpx;

	.title {
		color: #1D1F20;
		font-size: 36rpx;
		font-weight: 600;
	}
}

總結(jié)

本文簡單介紹了微信小程序自定義導航欄，若有其他更好的交互方式，歡迎評論區(qū)補充。文章來源地址http://www.zghlxwxcb.cn/news/detail-860147.html

到了這里，關(guān)于微信小程序（uniapp）自定義導航欄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！