Ver Fonte

feat(hot-sell): 使用滚动加载组件替换静态列表

将热门销售页面的书籍列表从一次性加载改为使用 `page-scroll` 组件进行分页滚动加载,提升长列表的渲染性能和用户体验。移除原有的 `getHotBookList` 方法,通过 `handleUpdateList` 事件更新列表数据。
ylong há 21 horas atrás
pai
commit
2236a9f1c8
1 ficheiros alterados com 23 adições e 22 exclusões
  1. 23 22
      pages-sell/pages/hot-sell.vue

+ 23 - 22
pages-sell/pages/hot-sell.vue

@@ -16,14 +16,22 @@
 
 		<!-- List Content -->
 		<view class="list-container">
-			<hot-sell-item 
-				v-for="(item, index) in bookList" 
-				:key="index" 
-				:rank="index + 1" 
-				:item="item"
-				@add-cart="addToCart"
-				@update-item="updateBookItem($event, index)"
-			></hot-sell-item>
+			<page-scroll ref="pageRef" class="hot-scroll" slotEmpty
+				url="/token/shop/showIndex/getHotBookList"
+				:page-size="20"
+				:params="listParams"
+				bgColor="#ffffff"
+				height="calc(100vh - 432rpx)"
+				@updateList="handleUpdateList">
+				<hot-sell-item 
+					v-for="(item, index) in bookList" 
+					:key="index" 
+					:rank="index + 1" 
+					:item="item"
+					@add-cart="addToCart"
+					@update-item="updateBookItem($event, index)"
+				></hot-sell-item>
+			</page-scroll>
 		</view>
 	</view>
 </template>
@@ -31,26 +39,26 @@
 <script>
 import HotSellItem from '../components/hot-sell-item/index.vue'
 import Navbar from '@/components/navbar/navbar.vue'
+import pageScroll from '@/components/pageScroll/index.vue'
 
 export default {
 	components: {
 		HotSellItem,
-		Navbar
+		Navbar,
+		pageScroll
 	},
 	data() {
 		return {
 			statusBarHeight: 20,
 			bookList: [],
-			scrollTop: 0
+			scrollTop: 0,
+			listParams: {}
 		}
 	},
 	created() {
 		const systemInfo = uni.getSystemInfoSync();
 		this.statusBarHeight = systemInfo.statusBarHeight || 20;
 	},
-	onLoad() {
-		this.getHotBookList();
-	},
 	onPageScroll(e) {
 		this.scrollTop = e.scrollTop;
 	},
@@ -58,15 +66,8 @@ export default {
 		goBack() {
 			uni.navigateBack();
 		},
-		getHotBookList() {
-			uni.showLoading({ title: '加载中...', mask: true });
-			this.$u.api.getHotBookListAjax({pageNum: 1, pageSize: 100}).then(res => {
-				if (res.code === 200) {
-					this.bookList = res.data || res.rows || [];
-				}
-			}).finally(() => {
-				uni.hideLoading();
-			});
+		handleUpdateList(list) {
+			this.bookList = list || [];
 		},
 		updateBookItem(updatedItem, index) {
 			this.$set(this.bookList, index, { ...this.bookList[index], ...updatedItem });