feat(页面样式): 实现导航栏随滚动动态改变背景和颜色

为多个页面组件添加滚动监听，根据滚动位置动态改变导航栏背景色和文字颜色
在小程序中使用绝对定位的图片替代背景图以解决兼容性问题

pages-sell/components/sell-container/index.vue

@@ -16,10 +16,11 @@
 		<view class="main-content" :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
 			<!-- 顶部固定区域：导航栏背景和搜索框 -->
 			<view class="fixed-header-area" :style="{
-				paddingTop: statusBarHeight + 44 + 'px',
-				backgroundImage: scrollTop > 0 ? 'url(/pages-sell/static/top-bg.png)' : 'none',
-				backgroundPosition: `center top`
+				paddingTop: statusBarHeight + 44 + 'px'
 			}">
+				<!-- 小程序背景图兼容：使用绝对定位的 image 替代 backgroundImage -->
+				<image class="fixed-bg-img" v-show="scrollTop > 0" src="/pages-sell/static/top-bg.png" mode="widthFix"></image>
+
 				<view class="search-wrapper" @click="navigateTo('/pages-sell/pages/search')">
 					<view class="search-box-uview">
 						<u-search placeholder="搜索关键字" :show-action="false" bg-color="transparent" height="40"
@@ -458,13 +459,21 @@ export default {
 	left: 0;
 	width: 100%;
 	z-index: 99;
-	background-size: 100% auto;
-	background-repeat: no-repeat;
 	padding-left: 24rpx;
 	padding-right: 24rpx;
 	padding-bottom: 16rpx;
 	box-sizing: border-box;
 	transition: background-color 0.2s;
+	overflow: hidden;
+}
+
+.fixed-bg-img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: -1;
+	display: block;
 }
 
 .search-placeholder {

pages-sell/pages/hot-sell.vue

@@ -4,7 +4,7 @@
 		<image class="header-bg" src="/pages-sell/static/hot/top-bg.png" mode="widthFix"></image>
 		
 		<!-- Custom Navbar -->
-		<Navbar></Navbar>
+		<Navbar :background="scrollTop > 0 ? '#ffffff' : 'transparent'"></Navbar>
 
 		<!-- Header Content -->
 		<view class="header-content">
@@ -39,7 +39,8 @@ export default {
 	data() {
 		return {
 			statusBarHeight: 20,
-			bookList: []
+			bookList: [],
+			scrollTop: 0
 		}
 	},
 	created() {
@@ -47,6 +48,9 @@ export default {
 		this.statusBarHeight = systemInfo.statusBarHeight || 20;
 		this.getHotBookList();
 	},
+	onPageScroll(e) {
+		this.scrollTop = e.scrollTop;
+	},
 	methods: {
 		goBack() {
 			uni.navigateBack();

pages-sell/pages/recommend.vue

@@ -5,7 +5,7 @@
         <image class="header-bg" src="/pages-sell/static/recommend/top-bg.png" mode="aspectFit"></image>
 
         <!-- Custom Navbar -->
-        <Navbar title="推荐图书专题"></Navbar>
+        <Navbar title="推荐图书专题" :background="scrollTop > 0 ? '#ffffff' : 'transparent'"></Navbar>
 
 		<!-- Header Content -->
 		<view class="header-content">
@@ -49,7 +49,8 @@ export default {
 			showName: "",
 			remark: "",
 			bookList: [],
-			cateType: ''
+			cateType: '',
+			scrollTop: 0
 		}
 	},
 	onLoad(options) {
@@ -58,6 +59,9 @@ export default {
 			this.loadData();
 		}
 	},
+	onPageScroll(e) {
+		this.scrollTop = e.scrollTop;
+	},
 	onReachBottom() {
 		if(this.loadStatus == 'loadmore') {
 			this.loadData();

pages-sell/pages/topic.vue

@@ -4,7 +4,7 @@
 		<image class="header-bg" :src="imageUrl" mode="widthFix"></image>
 
 		<!-- Custom Navbar -->
-		<Navbar title="图书专题" :titleSize="32" title-color="#ffffff" back-icon-color="#ffffff"></Navbar>
+		<Navbar title="图书专题" :titleSize="32" :title-color="scrollTop > 0 ? '#333333' : '#ffffff'" :back-icon-color="scrollTop > 0 ? '#333333' : '#ffffff'" :background="scrollTop > 0 ? '#ffffff' : 'transparent'"></Navbar>
 
 		<!-- Header Content -->
 		<view class="header-content">
@@ -48,7 +48,8 @@
 				total: 0,
 				bookList: [],
 				showName: '',
-				imageUrl: '/pages-sell/static/topic/top-bg-2.png'
+				imageUrl: '/pages-sell/static/topic/top-bg-2.png',
+				scrollTop: 0
 			}
 		},
 		onLoad(options) {
@@ -57,6 +58,9 @@
 				this.loadData();
 			}
 		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		},
 		methods: {
 			loadData() {
 				uni.showLoading({ title: '加载中' });