细节

pages/gamll/index.vue

@@ -18,11 +18,14 @@
 				</view>
 			</view>
 		</view>
-		<view class="tab_pos" style="">
-			<view class="tab_bg" :style="{ 'border-radius': radius}">
-				<view :class="[tabIndex==index ? 'tab_active' : 'tab_a']" v-for="(item,index) in tabbar"
-					@click="onChage(index)" :key="index">
-					{{item}}
+		<view class="tab_fix" :style="{ 'border-radius': radius}">
+			<!-- <view class="tab_posxi" v-if="isAtTop"></view> -->
+			<view class="tab_pos">
+				<view class="tab_bg">
+					<view :class="[tabIndex==index ? 'tab_active' : 'tab_a']" v-for="(item,index) in tabbar"
+						@click="onChage(index)" :key="index">
+						{{item}}
+					</view>
 				</view>
 			</view>
 		</view>
@@ -255,6 +258,7 @@
 				retail: '',
 				wholesale: '',
 				scrollTop: 0,
+				isAtTop: ''
 			}
 		},
 		onLoad() {
@@ -270,10 +274,19 @@
 		onShow() {
 
 		},
-		// onPageScroll(e) {
-		// 	this.scrollTop=e.scrollTop
-		//   },
+		onPageScroll(e) {
+			this.checkIfElementIsAtTop()
+		},
 		methods: {
+			checkIfElementIsAtTop() {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.tab_fix').boundingClientRect(data => {
+					if (data) {
+						// 元素的top值如果是0，说明它到达了顶部
+						this.isAtTop = data.top === 0;
+					}
+				}).exec();
+			},
 			goRules() {
 				uni.navigateTo({
 					url: '/pages/gamll/rules'
@@ -339,6 +352,7 @@
 				this.leftNum = index == 0 ? 33.33333 : 66.66666;
 				this.tabIndex = index;
 				this.getRetailList()
+				this.getDescribe()
 			},
 			onChageBan(index) {
 				this.banIndex = index
@@ -689,10 +703,8 @@
 
 		}
 
-		.tab_pos {
-			position: relative;
-			width: 100%;
-			height: 126rpx;
+		.tab_fix {
+			overflow: hidden;
 			position: -webkit-sticky;
 			/* 针对Safari浏览器的兼容性 */
 			position: sticky;
@@ -700,6 +712,20 @@
 			/* 设置吸顶的位置 */
 			z-index: 99999;
 			/* 确保sticky元素在其他内容之上 */
+			background: linear-gradient(180deg, rgba(253, 202, 197, 1) 0.42%, rgba(254, 231, 229, 1) 32.99%, rgba(255, 255, 255, 1) 100%);
+		}
+
+		.tab_pos {
+			position: relative;
+			width: 100%;
+			height: 126rpx;
+
+		}
+
+		.tab_posxi {
+			// background: #fdcac5;
+			width: 100%;
+			height: 120rpx;
 		}
 
 		.tab_bg {
@@ -710,7 +736,7 @@
 			display: flex;
 			justify-content: center;
 			// border-radius: 28rpx 28rpx, 0rpx, 0rpx;
-			background: linear-gradient(180deg, rgba(253, 202, 197, 1) 0.42%, rgba(254, 231, 229, 1) 32.99%, rgba(255, 255, 255, 1) 100%);
+
 		}
 
 		.tab_a {