兑换大厅精选商品样式调整

pages/core/index.vue

@@ -67,18 +67,20 @@
 
 
 		<!-- 精选商品部份开始 -->
-		<u-sticky offset-top="60" class="">
+		<u-sticky  class="offset-Height" :customNavHeight="navHeight">
 			<view class="screen-coin uSticky-toTop">
 				<view class="screen-coin-shopin">精选商品</view>
+
 				<view class="flex screen-coin-select">
-					<view @click="ascSelect" class="flex">
+					<view @click="ascSelect" class="flex screen-coin-select-text">
 						<view class="title">
 							<text>{{ ascListsingle.text}}</text>
 						</view>
 						<u-icon name="arrow-up" color="#333" size="18" v-if="ascShow"></u-icon>
 						<u-icon name="arrow-down" color="#333" size="18" v-else></u-icon>
 					</view>
-					<view @click="openSelect" class="flex">
+					<view class="screen-coin-select-line"></view>
+					<view @click="openSelect" class="flex screen-coin-select-text screen-coin-select-text-two">
 						<view class="title">
 							<text v-if="actionInfo.min">{{ actionInfo.min }}</text>
 							<text v-if="actionInfo.max">-{{ actionInfo.max }}</text>
@@ -238,6 +240,9 @@
 				],
 				ascListsingle: {},
 				ascListIndex: 0,
+				
+				// 距顶部位置
+				navHeight:0,
 			};
 		},
 		onShow() {
@@ -250,24 +255,33 @@
 			this.getSwiper()
 			this.getListIficationBox()
 			this.getExclusive()
+			
+			uni.getSystemInfo({
+				success: (data)=> {
+						let custom = wx.getMenuButtonBoundingClientRect()
+						//导航栏高度
+						this.navHeight = custom.bottom + custom.top - data.statusBarHeight
+					},
+					
+			})
 		},
 		methods: {
 			changeIndicatorDots(e) {
 				this.indicatorDots = true
 			},
-			
+
 			changeAutoplay(e) {
 				this.autoplay = true
 			},
-			
+
 			intervalChange(e) {
 				this.interval = e.target.value
 			},
-			
+
 			durationChange(e) {
 				this.duration = e.target.value
 			},
-			
+
 			// 跳转点击事件
 			toCoreRange(type, data, name) {
 				if (type == "link") {
@@ -278,7 +292,7 @@
 					})
 				}
 			},
-			
+
 			//轮播图
 			getSwiper() {
 				$http.post(`/api/v1/mp/user/exchange/banner/list`, {
@@ -292,7 +306,7 @@
 					this.imgTop = this.imgTop.concat(res.data)
 				})
 			},
-			
+
 			// 分类列表
 			getListIficationBox() {
 				$http.post(`/api/v1/mp/user/exchange/category/list`, {
@@ -305,7 +319,7 @@
 					this.goods = this.goods.concat(res.data)
 				})
 			},
-			
+
 			// 秒杀
 			async getExclusive() {
 				let resData = await $http.post(`/api/v1/mp/user/exchange/activity/list`, {
@@ -374,21 +388,40 @@
 				this.list = []
 				this.getList()
 			},
-			
+
 			openSelect() {
 				if (this.coinShow == false) {
 					this.coinShow = true
 					this.ascShow = false
+					
+					uni.createSelectorQuery().select(".core-cla").boundingClientRect((res) => {
+						uni.createSelectorQuery().select(".screen-coin-select-text-two").boundingClientRect((data) => {
+							uni.pageScrollTo({
+								duration: 0,
+								scrollTop: -res.top + data.top +350 ,
+							})
+						}).exec()
+					}).exec()
 				} else {
 					this.coinShow = false
 				}
 			},
-			
+
 			//排序切换
 			ascSelect() {
 				if (this.ascShow == false) {
 					this.ascShow = true
 					this.coinShow = false
+					
+					uni.createSelectorQuery().select(".core-cla").boundingClientRect((res) => {
+						uni.createSelectorQuery().select(".screen-coin-select-text").boundingClientRect((data) => {
+							uni.pageScrollTo({
+								duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
+								scrollTop: -res.top + data.top ,
+							})
+						}).exec()
+					}).exec()
+					
 				} else {
 					this.ascShow = false
 				}
@@ -506,19 +539,30 @@
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: space-between;
-			padding: 20rpx 15rpx;
+			padding: 20rpx 15rpx 0px 15px;
 			margin-bottom: 10px;
 		}
 	}
 
 	.screen-coin-shopin {
 		color: #2f2f2f;
-		font-size: 18px;
-		line-height: 25px;
+		font-size: 36rpx;
+		line-height: 16rpx;
 		display: inline-block;
-		padding: 8px;
+		padding: 18px 8px 0px 8px;
+	}
+
+	.screen-coin-select-text {
+		color: #848484;
 	}
 
+	.screen-coin-select-line {
+		border-right: 3rpx solid #bbbbbb;
+		width: 26rpx;
+		height: 26rpx;
+	}
+
+
 
 	//================
 	.screen-coin {
@@ -536,7 +580,7 @@
 			justify-content: flex-start;
 
 			.title {
-				padding-left: 40rpx;
+				padding-left: 20rpx;
 				margin-right: 10rpx;
 			}
 		}
@@ -592,7 +636,7 @@
 				.title {
 					padding: 0 14rpx;
 					font-size: 28rpx;
-					line-height: 40rpx;
+					// line-height: 40rpx;
 					overflow: hidden;
 					text-overflow: ellipsis;
 					display: -webkit-box;