微信小程序自定義頂部導(dǎo)航欄，使背景圖置頂；當(dāng)向上滾動(dòng)頁(yè)面時(shí)，實(shí)現(xiàn)頂部導(dǎo)航顏色漸變

效果圖

實(shí)現(xiàn)方法

一、在pages.json中設(shè)置"navigationStyle": “custom”

代碼如下（示例）：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-507314.html

"path": "pages/home/home",
"style": {
	"navigationBarTitleText": "XX網(wǎng)絡(luò)科技",
	"navigationBarBackgroundColor": "#309AEC",
	"navigationBarTextStyle": "white",
	"enablePullDownRefresh": false,
	"backgroundColor": "#ffffff",
	"navigationStyle": "custom"
	}						

二、在頁(yè)面中配置

提示：由于不同的手機(jī)機(jī)型頂部導(dǎo)航高度不一樣，所有要獲取手機(jī)的信息

實(shí)現(xiàn)方法

總共三步：
1、初始化獲取頂部導(dǎo)航信息
2、頂部導(dǎo)航文字上方通過(guò)view占位，同時(shí)設(shè)置頂部導(dǎo)航字體高和行高與膠囊保持一致，實(shí)現(xiàn)頂部導(dǎo)航文字在不同機(jī)型居中對(duì)齊
3、監(jiān)聽(tīng)滾動(dòng)事件，不滾動(dòng)時(shí)不加顏色，滾動(dòng)時(shí)給頂部加動(dòng)態(tài)樣式

代碼如下（示例）：

<template>
	<view class="Box">
		<!-- 設(shè)置背景圖片及自適應(yīng)高度 -->
		<view class="contain-box" :style="[{backgroundImage:'url('+backgroundImg+')'}, 'height:'+s_topImg+'rpx']" v-for="(item,index) in swipers" :key="index">
			<!-- 滾動(dòng)動(dòng)態(tài)設(shè)置樣式 -->
			<view :class="scrollTopShow?'top-item1':'top-item2'":style="'background:rgba(48, 154, 236,' +topOpacity+')'">
				<!-- 膠囊以上占位盒子 -->
				<view :style="'height:'+s_top+'rpx', 'line-height:'+s_top+'rpx'"></view>
				<!-- 動(dòng)態(tài)設(shè)置高和行高與膠囊保持一致 -->
				<view class="title-type" :style="['height:'+s_height+'rpx','line-height:'+s_height+'rpx']">
					XX網(wǎng)絡(luò)科技
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backgroundImg: '', // 頂部背景圖
				s_top: '', //膠囊距離頂部距離
				s_height: '', //膠囊行高	
				s_topImg: '',
				scrollTopShow: true, // 頂部顏色默認(rèn)隱藏
				topOpacity: 0,
			}
		}，
		created() {
			this.initTopImg();
		},
		// 監(jiān)聽(tīng)滾動(dòng)事件
		onPageScroll(e) { //nvue暫不支持滾動(dòng)監(jiān)聽(tīng)，可用bindingx代替
				let scrollTop = e.scrollTop;
				this.topOpacity = scrollTop / 300 > 0.9 ? 1 : scrollTop / 300
				if (e.scrollTop != 0) {
					this.scrollTopShow = false;
				} else {
					this.scrollTopShow = true;
				}
			},	
		methods: {
			// 初始化頂部背景圖
			initTopImg() {
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.s_top = menuButtonInfo.top * 2;
				this.s_topImg = menuButtonInfo.top * 2 + 508;
				this.s_height = menuButtonInfo.height * 2;
			},
			
		}
	}
</script>
<style lang="scss" scoped>
	.contain-box {
		width: 100%;
		background-size: 100% 100%;
		align-items: center;

		.top-item1 {
			.title-type {
				font-size: 36rpx;
				font-weight: 400;
				color: #fff;
				display: flex;
				justify-content: center;
				/* 水平居中 */
			}
		}

		.top-item2 {
			position: fixed;
			top: 0;
			width: 100%;

			.title-type {
				font-size: 36rpx;
				font-weight: 400;
				color: #fff;
				display: flex;
				justify-content: center;
				/* 水平居中 */
			}
		}
	}
</style>

到了這里，關(guān)于微信小程序自定義頂部導(dǎo)航，滾動(dòng)頁(yè)面頂部導(dǎo)航顏色漸變的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！