From 16b7a6e1f32763db1fcfb14534de5e63f7ba67ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Sat, 18 Sep 2021 10:48:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=8F=91=E7=8E=B0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=85=83=E7=B4=A0=E6=BF=80=E6=B4=BB=E5=8F=98=E5=A4=A7?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=AE=8C=E6=88=90=E7=83=AD=E9=94=80?=
 =?UTF-8?q?=E6=A6=9C=E5=8D=95=E5=BE=BD=E7=AB=A0=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/lf-indexFind/lf-indexFind.vue | 32 +++++++++++++-----
 pages/index/list/monthlyList.vue         | 42 +++++++++++++----------
 pages/index/list/selected.vue            | 43 ++++++++++++++----------
 3 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/components/lf-indexFind/lf-indexFind.vue b/components/lf-indexFind/lf-indexFind.vue
index d0bf638..96c6f28 100644
--- a/components/lf-indexFind/lf-indexFind.vue
+++ b/components/lf-indexFind/lf-indexFind.vue
@@ -1,10 +1,10 @@
 <template>
 	<view class="centent">
 		<view class="title" @click="$url('/pages/discover/discover')">精选发现好物</view>
-		<scroll-view class="find-scroll" :scroll-x="true">
+		<scroll-view class="find-scroll" :scroll-x="true" @scroll="scroll">
 			<view class="find-content">
-				<!-- :class="{'max-item': index == 0}"  -->
-				<view class="find-item" 
+				<view class="find-item" :id="'find_'+ (index+1)"
+					:class="{'max-item': index+1 == show_item}"
 					@click="$url('/pages/discover/discoverdetails')"
 					v-for="(item, index) in list" :key="index">
 					<image class="img" :src="item.image"></image>
@@ -26,14 +26,30 @@
 		},
 		data(){
 			return {
-				current: 0
+				current: 0,
+				scroll_view: 'find_1',
+				show_item: 1 // 当前显示的是第几个卡片
 			}
-		},
-		created(){
-			
 		},
 		methods: {
-			
+			scroll(event){
+				var currentLeft = event.detail.scrollLeft; // 当前已滚动的距离
+				var length = this.list.length;
+				var itemWidth = uni.upx2px(380); // 页面元素.find-item rpx转为px
+				var itemRight = uni.upx2px(20); // 页面元素.find-item 右边距
+				var itemTotalW = itemWidth + itemRight;
+				
+				var totalW = length * itemTotalW; // 1000 200
+				var startW = currentLeft > itemTotalW ? currentLeft : itemTotalW;
+				var number = Math.ceil(startW / totalW * length); // 得到当前是第几个元素
+				
+				// scrollLeft 已被滚动到元素一半宽度
+				if(number * itemTotalW - (itemTotalW/2) <= currentLeft){
+					this.show_item = number + 1; // 得到变大的元素
+				}else{
+					this.show_item = number;
+				}
+			}
 		}
 	}
 </script>
diff --git a/pages/index/list/monthlyList.vue b/pages/index/list/monthlyList.vue
index 4ddc690..38a6554 100644
--- a/pages/index/list/monthlyList.vue
+++ b/pages/index/list/monthlyList.vue
@@ -9,7 +9,10 @@
 			<view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')">
 				<view class="goods-img">
 					<image class="img" src="https://picsum.photos/200/300"></image>
-					<view class="ranking">{{ item+1 }}</view>
+					<view class="ranking">
+						<view class="top">{{ item+1 }}</view>
+						<view class="down"></view>
+					</view>
 				</view>
 				<view class="goods-info">
 					<view>
@@ -103,23 +106,26 @@
 					top: 0;
 					left: 0;
 					width: 36rpx;
-					height: 38rpx;
-					background-color: #15716E;
-					color: #FFFFFF;
-					line-height: 38rpx;
-					text-align: center;
-					z-index: 9;
-					&::after{
-						content: '';
-						position: absolute;
-						bottom: -16rpx;
-						left: 2rpx;
-						width: 0rpx;
-						height: 0rpx;
-						border-left: 17rpx solid transparent;
-						border-right: 17rpx solid transparent;
-						border-top: 17rpx solid #15716E;
-						z-index: -1;
+					height: 56rpx;
+					overflow: hidden;
+					.top{
+						width: 36rpx;
+						height: 36rpx;
+						background-color: #15716E;
+						position: relative;
+						z-index: 3;
+						text-align: center;
+						color: #FFFFFF;
+						font-size: 28rpx;
+					}
+					.down{
+						width: 36rpx;
+						height: 36rpx;
+						background-color: #15716E;
+						transform: rotate(45deg);
+						margin-top: -26rpx;
+						position: relative;
+						z-index: 1;
 					}
 				}
 			}
diff --git a/pages/index/list/selected.vue b/pages/index/list/selected.vue
index 56e053e..03725f1 100644
--- a/pages/index/list/selected.vue
+++ b/pages/index/list/selected.vue
@@ -16,7 +16,10 @@
 						<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')">
 							<view class="goods-img">
 								<image class="img"></image>
-								<view class="ranking">{{ item+1 }}</view>
+								<view class="ranking">
+									<view class="top">{{ item+1 }}</view>
+									<view class="down"></view>
+								</view>
 							</view>
 							<view class="goods-info">
 								<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view>
@@ -119,28 +122,32 @@
 							background-color: #EEEEEE;
 							border-radius: 10rpx;
 						}
+						
 						.ranking{
 							position: absolute;
 							top: 0;
 							left: 0;
 							width: 36rpx;
-							height: 38rpx;
-							background-color: #15716E;
-							color: #FFFFFF;
-							line-height: 38rpx;
-							text-align: center;
-							z-index: 9;
-							&::after{
-								content: '';
-								position: absolute;
-								bottom: -16rpx;
-								left: 2rpx;
-								width: 0rpx;
-								height: 0rpx;
-								border-left: 17rpx solid transparent;
-								border-right: 17rpx solid transparent;
-								border-top: 17rpx solid #15716E;
-								z-index: -1;
+							height: 56rpx;
+							overflow: hidden;
+							.top{
+								width: 36rpx;
+								height: 36rpx;
+								background-color: #15716E;
+								position: relative;
+								z-index: 3;
+								text-align: center;
+								color: #FFFFFF;
+								font-size: 28rpx;
+							}
+							.down{
+								width: 36rpx;
+								height: 36rpx;
+								background-color: #15716E;
+								transform: rotate(45deg);
+								margin-top: -26rpx;
+								position: relative;
+								z-index: 1;
 							}
 						}
 					}