优化

pages/shopList/index.vue

@@ -142,6 +142,7 @@
 			    return;
 			  }
 			  this.loadTitle = "";
+				uni.showLoading();
 				Api.getShopList({
 			      sort: this.activeFilter,
 			      page: this.page++,
@@ -150,6 +151,7 @@
 			    })
 					.then(result => {
 						console.log(result);
+						uni.hideLoading();
 						const data = result.data.data;
 						this.shopsList = this.shopsList.concat(data);
 						this.finished = data.length < this.limit;

pages/shopList/shopPage.vue

@@ -78,23 +78,27 @@
 									:class="{ on: activeFilter === 'price' && filterDirection === 'ASC'}"></text>
 							</view>
 						</view>
-						<view class="goods-list">
-							<view v-for="(item, index) in goods" :key="index" class="good"
-								@click="onGoodDetail(item.goods_id)">
-								<image :src="item.goods_image" mode="widthFix"></image>
-								<view class="name">{{ item.goods_name }}</view>
-								<view class="price">
-									<text
-										class="now-price">¥{{ item.goods_price_min>0?Number(item.goods_price_min):0.00 }}</text>
-									<text v-if="item.line_price_min > 0"
-										class="origin-price">¥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
+						<view class="content-list">
+							<scroll-view  :scroll-top="scrollTop" class="scroll-goods-list" scroll-y="true" @scrolltolower="loadMore" @scroll="goodsListScroll">
+								<view class="goods-list">
+									<view v-for="(item, index) in goods" :key="index" class="good"
+										@click="onGoodDetail(item.goods_id)">
+										<image :src="item.goods_image" mode="widthFix"></image>
+										<view class="name">{{ item.goods_name }}</view>
+										<view class="price">
+											<text
+												class="now-price">¥{{ item.goods_price_min>0?Number(item.goods_price_min):0.00 }}</text>
+											<text v-if="item.line_price_min > 0"
+												class="origin-price">¥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
+										</view>
+									</view>
 								</view>
-							</view>
-						</view>
-						<view v-if="goods.length && !loading" class="finished">{{ loadTitle }}</view>
-						<view v-if="finished && !goods.length" class="empty">
-							<image mode="aspectFill" src="@/static/empty.png" alt="暂无商品" />
-							<view>暂无商品</view>
+								<view v-if="goods.length && !loading" class="finished">{{ loadTitle }}</view>
+								<view v-if="finished && !goods.length" class="empty">
+									<image mode="aspectFill" src="@/static/empty.png" alt="暂无商品" />
+									<view>暂无商品</view>
+								</view>
+							</scroll-view>
 						</view>
 					</view>
 				</view>
@@ -148,6 +152,8 @@
 					}
 				],
 				isTop: false,
+				scrollTop: 0,
+				oldScrollTop: 0,
 				page: 1,
 				limit: 10,
 				loadTitle: '',
@@ -184,13 +190,6 @@
 				this.getGoodsList();
 			},
 		},
-		onPageScroll(e) {
-			if (e.scrollTop <= 200) { // 当滚动到顶部且向下滑动时为true
-				this.isTop = false
-			} else {
-				this.isTop = true
-			}
-		},
 		onLoad({
 			id
 		}) {
@@ -198,10 +197,10 @@
 			this.getShopDetail()
 			this.getGoodsTypeList();
 		},
-		onReachBottom() {
-			this.getGoodsList();
-		},
 		methods: {
+			loadMore() {
+				this.getGoodsList();
+			},
 			back() {
 				let pages = getCurrentPages();
 				if (pages.length > 1) {
@@ -231,10 +230,24 @@
 				this.finished = false;
 				this.getGoodsList();
 			},
+			goodsListScroll(e) {
+				this.oldScrollTop = e.detail.scrollTop;
+				if (this.oldScrollTop <= 200) { // 当滚动到顶部且向下滑动时为true
+					this.isTop = false
+				} else {
+					this.isTop = true
+				}
+			},
 			openScrollTo() {
-				uni.pageScrollTo({
-					scrollTop: 0
-				})
+				// uni.pageScrollTo({
+				// 	scrollTop: 0
+				// })
+				//视图会发生重新渲染
+				this.scrollTop = this.oldScrollTop
+				//当视图渲染结束 重新设置为0
+				this.$nextTick(() =>{
+						this.scrollTop = 0
+				});
 			},
 			toCer() {
 				uni.navigateTo({
@@ -246,7 +259,6 @@
 						id: this.id
 					})
 					.then(result => {
-						console.log(result);
 						this.shopDetail = result.data.detail;
 					})
 					.finally(() => this.loading = false)
@@ -292,7 +304,6 @@
 					.then(result => {
 						// 合并新数据
 						const data = result.data.list.data;
-						console.log(data);
 						this.goods = this.goods.concat(data);
 						this.finished = data.length < 10;
 						this.loadTitle = this.finished ? "我是有底线的哦~" : "上拉加载更多";
@@ -350,6 +361,7 @@
 		flex-direction: column;
 		background: url(https://www.royaum.com.cn/static/shop/shop-page-bg.png) center top no-repeat;
 		background-size: 100% auto;
+		overflow-y: hidden;
 
 		.navbarContent {
 			display: flex;
@@ -390,6 +402,7 @@
 			display: flex;
 			flex-direction: column;
 			padding-top: 30rpx;
+			overflow-y: hidden;
 
 			.shop-tip {
 				padding: 0 24rpx;
@@ -508,6 +521,7 @@
 				margin-top: 30rpx;
 				background: #F0F4F3;
 				border-radius: 20rpx 20rpx 0 0;
+				overflow-y: hidden;
 
 				// padding-top: 24rpx;
 				.second-cate {
@@ -548,15 +562,16 @@
 				.goods-content {
 					flex: 1;
 					display: flex;
+					overflow-y: hidden;
 
 					.first-cate {
-						height: 100%;
 						width: 120rpx;
 
 						.first-cate-tabs {
 							overflow-x: hidden;
 							overflow-y: auto;
 							background: #fff;
+							height: 100%;
 
 							.cate-item {
 								width: 100%;
@@ -600,6 +615,7 @@
 						width: calc(100% - 108rpx);
 						display: flex;
 						flex-direction: column;
+						overflow-y: hidden;
 
 						.filter-box {
 							height: 88rpx;
@@ -607,6 +623,7 @@
 							display: flex;
 							justify-content: space-between;
 							align-items: center;
+							flex-shrink: 0;
 
 							.filter-item {
 								color: #333;
@@ -644,11 +661,14 @@
 								}
 							}
 						}
-
+						.content-list {
+							height: calc(100% - 88rpx);
+							.scroll-goods-list {
+								height: 100%;
+							}
+						}
 						.goods-list {
 							padding: 0 20rpx;
-							overflow-x: hidden;
-							overflow-y: auto;
 							display: flex;
 							flex-wrap: wrap;
 							justify-content: space-between;