feat: 在首页和品牌页面中添加滚动事件处理和曝光检测功能，优化用户体验和数据记录

pages/index/index.vue

 <template>
   <view class="container">
     <Home ref="homeRef" v-if="globalStore.curTabIndex == 0" :scroll-top="scrollTop" />
-    <Brand v-if="globalStore.curTabIndex == 1" />
+    <Brand v-if="globalStore.curTabIndex == 1" :scroll-top="scrollTop" />
     <Integral v-if="globalStore.curTabIndex == 2" />
     <My v-if="globalStore.curTabIndex == 3" />
     <TabBar :curTabIndex="globalStore.curTabIndex" @tabClick="handleTabClick" />
@@ -75,9 +75,7 @@ onShareTimeline(() => {
 });
 
 onPageScroll((e) => {
-  if (globalStore.curTabIndex === 0) {
     scrollTop.value = e.scrollTop;
-  }
 });
 </script>
 

pages/search/search.vue

@@ -7,7 +7,7 @@
 					<image :data-log="{
 					xcxClick:'搜索页页面点击',
 					pageName:`${step === 1?'搜索页':'搜索结果页'}`,
-					buttonName:'放大镜' }" @tap="searchHandler(searchValue,$event)" class="icon_search_yellow"
+					buttonName:`放大镜-${searchValue}` }" @tap="searchHandler(searchValue,$event)" class="icon_search_yellow"
 						:src="$baseUrl + 'searchpage/icon_search_yellow.png'">
 					</image>
 					<input confirm-type="search" maxlength="50" :value="searchValue" class="nav-bar-input" type="text"
@@ -145,12 +145,23 @@ export default {
 			}
 		},
 		onTabChange(evt) {
+		this.tabIndex = evt.detail.name;
 			md.sensorLogTake({
 				xcxClick:'搜索页页面点击',
 				pageName:'搜索结果页',
 				buttonName:`搜索${evt.detail.name}分类`
 			});
-			this.tabIndex = evt.detail.name;
+			if(evt.detail.name === 'content'){
+				md.sensorLogTake({
+					xcxPage:'搜索结果页-首屏-内容浏览',
+					pageName:'搜索结果页-首屏-内容'
+				});
+			}else{
+				md.sensorLogTake({
+					xcxPage:'搜索结果页-首屏-工具浏览',
+					pageName:'搜索结果页-首屏-工具'
+				});
+			}
 
 		},
 		confirm(evt) {
@@ -164,6 +175,11 @@ export default {
 				this.searchValue = _searchValue;
 			}
 			this.step = 2;
+
+			md.sensorLogTake({
+				xcxPage:'搜索结果页-首屏-内容浏览',
+				pageName:'搜索结果页-首屏-内容'
+			});
 			search({
 				keyword: this.searchValue
 			}).then(res => {

views/Brand.vue

 <template>
 	<view class="brand-container">
 		<view class="content">
-			<swiper class="swiper banner" :current="swiperIndex" @animationfinish="intervalChange" circular
+			<swiper id="firstScreen" class="swiper banner" :current="swiperIndex" @animationfinish="intervalChange" circular
 				:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
 				:indicator-color="indicatorColor" :indicator-active-color="indicatoractiveColor">
-				<swiper-item v-for="item in swiperList" :key="item.url">
+				<swiper-item v-for="(item,index) in swiperList" :key="index">
 					<view class="swiper-item banneritem">
 						<image :data-log="{
 							xcxClick: '品牌故事-首屏页面点击',
@@ -36,7 +36,7 @@
 				}" @tap="openChannel" class="videoposter" :src="$baseUrl + 'brandpage/videoposter.png'">
 				</image>
 			</view>
-			<view class="productcontai">
+			<view id="secondScreen" class="productcontai">
 				<text class="maintitle">飞鹤产品家族</text>
 				<view class="listbox">
 					<view @tap="channelTabHandler(index, $event)" :data-log="{
@@ -70,7 +70,7 @@
 
 
 			</view>
-			<view class="ipbox">
+			<view id="thirdScreen" class="ipbox">
 				<image :data-log="{
 					xcxClick: '品牌故事-三屏页面点击',
 					pageName: '品牌故事-三屏页面',
@@ -184,7 +184,59 @@ import { brandObj } from '../mock/brand';
 import { fetchBrandJSON } from '../api/brand';
 import { jump, JumpType } from '../utils';
 import md from '../md';
+import ExposureTracker from '../utils/exposure';
+
+// 定义需要曝光检测的元素配置
+const EXPOSURE_CONFIGS = [
+	{
+		id: 'firstScreen',
+		logParams: {
+			xcxPage: '品牌故事-首屏页面浏览',
+			pageName: '品牌故事-首屏页面'
+		}
+	},
+	// 可以添加更多需要曝光检测的元素配置
+	{
+		id: 'secondScreen',
+		logParams: {
+			xcxPage: '品牌故事-首屏页面浏览',
+			pageName: '品牌故事-次屏页面'
+		}
+	},
+	{
+		id: 'thirdScreen',
+		logParams: {
+			xcxPage: '品牌故事-首屏页面浏览',
+			pageName: '品牌故事-三屏页面'
+		}
+	}
+];
+
 export default {
+	beforeDestroy() {
+		if (this.exposureTracker) {
+			this.exposureTracker.resetAllExposure();
+		}
+	},
+	deactivated() {
+		if (this.exposureTracker) {
+			this.exposureTracker.resetAllExposure();
+		}
+	},
+	props: {
+		scrollTop: {
+			type: Number,
+			default: 0
+		}
+	},
+	watch: {
+		scrollTop: {
+			handler(newVal) {
+				this.checkExposure(newVal);
+			}
+		},
+	},
+	
 	data() {
 		return {
 			popType: 'bottom',
@@ -212,18 +264,21 @@ export default {
 			videoHeight: 210,
 			swiperNameList: ["北纬47°入口", "自有牧场入口", "工厂预约入口"],
 			hexiaofeiNameList: ["主要竖屏商品", "主要横屏商品", "视频号", "小红书"],
+			exposureTracker: null,
 		}
 	},
 	mounted() {
-		// this.swiperList = brandObj.swiperList;
-		// this.productTabList = brandObj.productTabList;
-		// this.productInfoList = brandObj.productInfoList;
-		// this.esgInfoList = brandObj.esgInfoList;
-		// this.qrInfoList = brandObj.qrInfoList;
-		// this.ipDesc = brandObj.ipDesc;
-		// this.swiperIconList = brandObj.swiperIconList;
-		// this.currentVideoUrl=brandObj.videoUrl;
+		
 		this.initBrandInfo();
+		
+		// 初始化曝光检测工具
+		this.exposureTracker = new ExposureTracker(this);
+		this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);
+		
+		// 初始检查曝光
+		this.$nextTick(() => {
+			this.checkExposure(this.scrollTop);
+		});
 	},
 	methods: {
 		async initBrandInfo() {
@@ -386,6 +441,16 @@ export default {
 			const ratio = height / width;
 			this.videoWidth = pageWidth;
 			this.videoHeight = pageWidth;// pageWidth * ratio;
+		},
+		checkExposure(scrollTop) {
+			if (this.exposureTracker) {
+				this.exposureTracker.checkExposure(scrollTop);
+			}
+		},
+		resetExposure() {
+			if (this.exposureTracker) {
+				this.exposureTracker.resetAllExposure();
+			}
 		}
 	}
 }