样式

pages/groupbuying_details/index.vue

@@ -268,7 +268,7 @@
 		</uni-popup>
 
 
-		<view v-if="lookGoods" class="lookGoods flex-col" @click="toGoods(storeInfo.goodsList[0].id)">
+		<view v-if="lookGoods" class="lookGoods flex-col" @click="toGoods1(storeInfo.goodsList[0].id)">
 			<view class="lookGoodsImageView">
 				<image class="lookGoodsImage" :src="storeInfo.goodsList[0].goodsCover" mode="scaleToFill" />
 			</view>
@@ -662,10 +662,24 @@ export default {
 	methods: {
 
 		getFirstGoodsTop(id){
+			let that =this
+			console.log('+++++++++++++++++++++++获取第一个商品到顶部的距离+++++++++++++++++++++++++++++++++',id)
 			uni.createSelectorQuery().select("#goods"+id).boundingClientRect(data =>{
-				this.firstGoodsTop = Math.round(data.top);
+				console.log('+++++++++++++++++++++++获取第一个商品到顶部的距离+++++++++++++++++++++++++++++++++')
+				console.log('+++++++++++++++++++++++获取第一个商品到顶部的距离+++++++++++++++++++++++++++++++++',data)
+				that.firstGoodsTop= Math.round(data.top);
+				console.log('+++++++++++++++++++++++第一个商品到顶部的距离+++++++++++++++++++++++++++++++++',firstGoodsTop)
 			}).exec();
 		},
+		toGoods1(id){
+			console.log(id)
+			uni.createSelectorQuery().select("#goods"+id).boundingClientRect(data =>{
+				console.log("得到布局位置信息" , data);
+				console.log("节点离页面顶部的距离为" + data.top);
+				this.scrollTop = Math.round(data.top) + Math.round(this.scrollY)
+			}).exec();
+			this.lookGoods = false
+		},
 
 		toGoods(id){
 			console.log(id)
@@ -817,10 +831,10 @@ export default {
 			);
 		},
 		scroll (e) {
-			if (e.detail.scrollTop >= this.firstGoodsTop){
+			if (e.detail.scrollTop >= this.firstGoodsTop  -300){
 				this.lookGoods=false
 			}
-			if (e.detail.scrollTop <= this.firstGoodsTop){
+			if (e.detail.scrollTop <= this.firstGoodsTop - 300){
 				this.lookGoods=true
 			}
 			var that = this,
@@ -985,11 +999,13 @@ export default {
       detailGroupon({grouponId: that.id}).then((res) => {
           that.storeInfo = res.data
 		  this.isShowBottom = this.getIsShowBottom(res.data.grouponEndTime)
-		  this.getFirstGoodsTop(res.data.goodsList[0].id);
 		  if (this.isShowBottom ){
 			  this.bottomHeight = '150rpx'
 			  console.log(this.bottomHeight,this.isShowBottom)
 		  }
+		  setTimeout(() =>{
+			  this.getFirstGoodsTop(res.data.goodsList[0].id);
+		  },2000)
 		  console.log('+++++++++++isShowBottom++++++++++++++',this.isShowBottom)
       })
     },
@@ -2713,8 +2729,8 @@ action-sheet-item {
 	}
 	.lookGoods{
 		background-color: white;
-		width: 200rpx;
-		height: 250rpx;
+		width: 150rpx;
+		height: 190rpx;
 		border-radius: 4rpx;
 		overflow: hidden;
 		padding: 4rpx 4rpx;
@@ -2722,23 +2738,27 @@ action-sheet-item {
 		bottom:60px;
 		right:5px;
 		z-index: 99;
-		border: 1px solid #999999;
+		background-color: #999999;
 	}
 	.lookGoodsImageView{
-		width: 192rpx;
-		height: 192rpx;
+		width: 142rpx;
+		height: 142rpx;
 		border-radius: 4rpx;
 		overflow: hidden;
 	}
 	.lookGoodsImage{
-		width: 196rpx;
-		height: 196rpx;
+		width: 142rpx;
+		height: 142rpx;
 	}
 	.lookGoodsTextView{
 		display: flex;
+		font-size: 26rpx;
+		height: 40rpx;
+		line-height: 40rpx;
 		flex-direction: row;
 		justify-content: center;
 		margin-top: 4rpx;
+		color: white;
 	}
 	.lookGoodsNumberView{
 		border-radius: 5rpx;
@@ -2752,6 +2772,7 @@ action-sheet-item {
 		position:absolute;
 		top: 0rpx;
 		right: 0rpx;
+		opacity: 0.7;
 	}
 	.page{
 		height: auto !important;