Signed-off-by: liuboyan <632697560@qq.com>

1

pages/shop/index.vue

@@ -1,27 +1,24 @@
 <template>
 	<view class="container">
-		<view class="search-box">
-			<uni-search-bar radius="5" placeholder="搜索" clearButton="auto" cancelButton="none" bgColor="#F8F8F8" @confirm="search"
-			 class="search-bar" />
-		</view>
-		<scroll-view show-scrollbar="true" scroll-y="true" class="sort-left-box">
-			<view class="sort-left-row" :class="sortFirstCode == item.cateCode ? 'sort-left-row-active' : ''" v-for="(item,index) in sortFirstList"
-			 @click="checkFirstSort(item)" :key="index">
-				<text>{{item.cateValue}}</text>
-			</view>
-		</scroll-view>
 		<view class="sort-right-box">
-			<scroll-view show-scrollbar="true" scroll-x="true" class="sort-right-row">
+			<view class="search-box">
+				<uni-search-bar radius="5" placeholder="搜索" clearButton="auto" cancelButton="none" bgColor="#F8F8F8" @confirm="search"
+				 class="search-bar" />
+			</view>
+			<view class="sort-left-box">
+				<view class="sort-left-row" :class="sortFirstCode == item.cateCode ? 'sort-left-row-active' : ''" v-for="(item,index) in sortFirstList"
+				 @click="checkFirstSort(item)" :key="index">
+					<text>{{item.cateValue}}</text>
+				</view>
+			</view>
+			<view class="sort-right-row">
 				<!-- <view style="padding-top: 20px;background-color: #909399;" v-if="sortSecondList.length<=0">
 					<u-divider color="#909399" border-color="#909399">没有更多了</u-divider>
 				</view> -->
 				<view class="sort-right-col" :class="sortSecondCode == item.cateCode ? 'sort-right-col-active' : ''" v-for="(item,index) in sortSecondList"
 				 :key="index" @click="checkSecondSort(item)">{{item.cateValue}}</view>
-			</scroll-view>
+			</view>
 			<scroll-view class="goods-box" scroll-y="true" @scrolltolower="handleLoadMore()">
-				<view style="padding-top: 20px;background-color: #FFFFFF;" v-if="goodsList.length<=0">
-					<u-divider color="#909399" border-color="#909399">没有更多了</u-divider>
-				</view>
 				<view class="goods-row" v-for="(item, index) in goodsList" :key="index" @click="goToGoodDetails(item)">
 					<image class="goods-img" :src="item.imgPath" mode="aspectFill"></image>
 					<view class="goods-info">
@@ -39,6 +36,9 @@
 						</view>
 					</view>
 				</view>
+				<view style="padding-top: 20px;background-color: #FFFFFF;" v-if="isOver">
+					<u-divider color="#909399" border-color="#909399">没有更多了</u-divider>
+				</view>
 			</scroll-view>
 		</view>
 		<u-modal v-model="modalShow" content="是否将该商品添加至购物车" @confirm="submitAddCart()" :async-close="true"
@@ -196,13 +196,19 @@
 		width: 100%;
 		height: calc(100% - 70px);
 		float: left;
+		position: relative;
 
 		.search-box {
 			width: 100%;
 			height: 58px;
 			box-sizing: border-box;
+			background-color: #FFFFFF;
 			padding: 2px 12px 1px 12px;
 			border-bottom: 1px solid #DDDDDD;
+			position: fixed;
+			z-index: 2;
+			left: 0;
+			top: 0;
 
 			/deep/.search-bar {
 				.uni-searchbar__box {
@@ -213,9 +219,15 @@
 
 		.sort-left-box {
 			width: 80px;
-			height: calc(100% - 58px);
+			height: calc(100vh - 58px);
+			border-right: 1px solid #DDDDDD;
+			background-color: #FFFFFF;
 			float: left;
 			overflow-y: auto;
+			position: fixed;
+			z-index: 2;
+			left: 0;
+			top: 58px;
 
 			.sort-left-row {
 				width: 100%;
@@ -238,18 +250,24 @@
 		}
 
 		.sort-right-box {
-			width: calc(100% - 81px);
-			height: calc(100% - 58px);
+			width: 100vw;
 			float: left;
-			border-left: 1px solid #DDDDDD;
+			position: relative;
+			padding: 102px 0 0 81px;
 
 			.sort-right-row {
-				width: 100%;
+				width: calc(100vw - 81px);
 				height: 44px;
 				padding: 9px 2px 0px 7px;
 				box-sizing: border-box;
+				background-color: #FFFFFF;
 				white-space: nowrap;
 				float: left;
+				position: fixed;
+				z-index: 2;
+				left: 81px;
+				top: 58px;
+				overflow-y: auto;
 
 				.sort-right-col {
 					height: 26px;
@@ -274,11 +292,11 @@
 
 			.goods-box {
 				width: 100%;
-				height: calc(100% - 44px) !important;
 				padding: 6px 0 0px 0;
 				box-sizing: border-box;
 				float: left;
 				overflow-y: auto;
+				position: relative;
 
 				.goods-row {
 					width: calc(100% - 24px);