细节

pages/gamll/index.vue

@@ -2,7 +2,8 @@
 	<view class="park">
 		<view class="park-top">
 			<view class="park-navbar">
-				<u-navbar :is-fixed='false' title="开通商城" :border-bottom="false" :background="backgroundNone">
+				<!-- :is-fixed='false' -->
+				<u-navbar title="开通商城" :border-bottom="false" :background="scrollTop?background:backgroundNone">
 				</u-navbar>
 				<view class="box_1">
 					<image :src="$picUrl+'/static/default-logo.png'" class="image_2"
@@ -19,16 +20,18 @@
 				</view>
 			</view>
 		</view>
-		<view class="tab_fix" :style="{ 'border-radius': radius,'padding-top':paddingTo}">
-			<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}}
+		<u-sticky offset-top="142">
+			<view class="tab_fix" :style="{ 'border-radius': radius}">
+				<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>
-		</view>
+		</u-sticky>
 		<view class="tab-type">
 			<view class="tab-pro" v-for="(item,index) in tabType" :class="index==banIndex?'tab-pro-active':''"
 				@click="onChageBan(index)" :key="index">
@@ -237,7 +240,6 @@
 				paymentMethods: [],
 				isClick: true,
 				radius: '28rpx 0 0 0',
-				paddingTo: '0rpx',
 				leftNum: 33.33333,
 				tabbar: ['零售商城', '批发商城'],
 				tabIndex: 0,
@@ -265,12 +267,10 @@
 				retail: '',
 				wholesale: '',
 				scrollTop: 0,
-				isAtTop: ''
 			}
 		},
 		onLoad() {
 			this.retail = uni.getStorageSync('userInfo').retail
-			console.log(this.retail)
 			this.getRetailList()
 			this.getDescribe()
 			uni.$on('appShow', this.solveShowMsg);
@@ -279,25 +279,22 @@
 			uni.$off('appShow', this.solveShowMsg);
 		},
 		onShow() {
-
+			this.checkIfElementIsAtTop()
 		},
 		onPageScroll(e) {
-			this.checkIfElementIsAtTop()
+			this.scrollTop = e.scrollTop > 120 ? true : false
+			if (this.scrollTop) {
+				this.radius = '0rpx';
+			} else {
+				this.radius = this.tabIndex == 0 ? '28rpx 0 0 0' : '0 28rpx 0 0';
+			}
 		},
 		methods: {
 			checkIfElementIsAtTop() {
 				const query = uni.createSelectorQuery().in(this);
-				query.select('.tab_fix').boundingClientRect(data => {
+				query.select('u-navbar ').boundingClientRect(data => {
 					if (data) {
-						// 元素的top值如果是0，说明它到达了顶部
-						this.isAtTop = data.top === 0;
-						if (this.isAtTop) {
-							this.radius = '28rpx 0 0 0';
-							this.paddingTo = '120rpx';
-						} else {
-							this.radiu = '0';
-							this.paddingTo = '0rpx';
-						}
+						console.log(data, 'kkkkkkkkkkkkkkkkk')
 					}
 				}).exec();
 			},
@@ -719,10 +716,7 @@
 
 		.tab_fix {
 			overflow: hidden;
-			position: -webkit-sticky;
-			position: sticky;
-			top: 0;
-			z-index: 99999;
+			height: 126rpx;
 			background: linear-gradient(180deg, rgba(253, 202, 197, 1) 0.42%, rgba(254, 231, 229, 1) 32.99%, rgba(255, 255, 255, 1) 100%);
 		}
 
@@ -874,6 +868,7 @@
 		.tab-box {
 			margin: 10rpx 30rpx 24rpx 30rpx;
 			overflow: hidden;
+
 			.tabFavour {
 				display: flex;
 				justify-content: space-between;