fix: 折扣/场馆列表改用页面级触底加载，修复加载更多永不触发
- scroll-view 无固定高度导致 scrolltolower 永不触发，列表卡在首页 10 条；改为普通 view + onReachBottom 页面级触底 - 新增请求序号取代机制：翻页在途时搜索不再被吞、过期响应整体丢弃 - 本页不足一页即钉住 total，防止翻页途中数据变动导致无限空翻 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jacobxu666
co-authored by
Claude Fable 5
Claude Fable 5
parent
4ac98a30fb
commit
1f1b86feb3
@@ -16,7 +16,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 商户列表 -->
|
||||
<scroll-view class="list-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
|
||||
<view class="list-area">
|
||||
<view class="venue-card" v-for="item in list" :key="item.shopId" @click="goDetail(item)">
|
||||
<image class="card-img" :src="item.image" mode="aspectFill" />
|
||||
<view class="card-info">
|
||||
@@ -35,7 +35,7 @@
|
||||
<view v-if="hasScrolled" class="nomore-area">
|
||||
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="''" :nomore-text="'我也是有底线的'" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -52,7 +52,8 @@ export default {
|
||||
lng: '',
|
||||
lat: '',
|
||||
loadStatus: 'loadmore',
|
||||
hasScrolled: false
|
||||
hasScrolled: false,
|
||||
reqSeq: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -72,9 +73,14 @@ export default {
|
||||
.finally(() => this.loadList())
|
||||
}
|
||||
},
|
||||
// xuchao: 改用页面级触底加载（scroll-view 无固定高度时 scrolltolower 永不触发）
|
||||
onReachBottom() {
|
||||
this.loadMore()
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
if (this.loading) return
|
||||
// xuchao: 请求序号 —— 新请求直接取代在途请求，过期响应整体丢弃（修复搜索竞态，故不再用 loading 提前 return）
|
||||
const seq = ++this.reqSeq
|
||||
this.loading = true
|
||||
this.loadStatus = 'loading'
|
||||
const params = {
|
||||
@@ -86,6 +92,7 @@ export default {
|
||||
if (this.lng) params.lng = this.lng
|
||||
if (this.lat) params.lat = this.lat
|
||||
this.$u.api.getStoreList(params).then(res => {
|
||||
if (seq !== this.reqSeq) return
|
||||
if (res.errcode === 0 && res.data) {
|
||||
const list = res.data.list || []
|
||||
if (this.pageNo === 1) {
|
||||
@@ -94,8 +101,11 @@ export default {
|
||||
this.list = this.list.concat(list)
|
||||
}
|
||||
this.total = res.data.total || 0
|
||||
// xuchao: 本页不足一页即已到尾部，钉住 total，防止 total 中途变大时空翻
|
||||
if (list.length < this.pageSize) this.total = this.list.length
|
||||
}
|
||||
}).finally(() => {
|
||||
if (seq !== this.reqSeq) return
|
||||
this.loading = false
|
||||
if (this.list.length === 0) {
|
||||
this.loadStatus = 'nomore'
|
||||
@@ -195,7 +205,7 @@ export default {
|
||||
|
||||
.list-area {
|
||||
padding: 12px;
|
||||
// xuchao: scroll-view 默认 content-box，100%+padding 会撑出页面横向滚动
|
||||
// xuchao: border-box 防止 padding 撑出页面横向滚动
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
+14
-4
@@ -16,7 +16,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 场馆列表 -->
|
||||
<scroll-view class="list-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
|
||||
<view class="list-area">
|
||||
<view class="venue-card" v-for="item in list" :key="item.shopId" @click="goDetail(item)">
|
||||
<image class="card-img" :src="item.image" mode="aspectFill" />
|
||||
<view class="card-info">
|
||||
@@ -32,7 +32,7 @@
|
||||
<view v-if="hasScrolled" class="nomore-area">
|
||||
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="''" :nomore-text="'我也是有底线的'" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -49,7 +49,8 @@ export default {
|
||||
lng: '',
|
||||
lat: '',
|
||||
loadStatus: 'loadmore',
|
||||
hasScrolled: false
|
||||
hasScrolled: false,
|
||||
reqSeq: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -62,9 +63,14 @@ export default {
|
||||
}
|
||||
this.loadList()
|
||||
},
|
||||
// xuchao: 改用页面级触底加载（scroll-view 无固定高度时 scrolltolower 永不触发）
|
||||
onReachBottom() {
|
||||
this.loadMore()
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
if (this.loading) return
|
||||
// xuchao: 请求序号 —— 新请求直接取代在途请求，过期响应整体丢弃（修复搜索竞态，故不再用 loading 提前 return）
|
||||
const seq = ++this.reqSeq
|
||||
this.loading = true
|
||||
this.loadStatus = 'loading'
|
||||
const params = {
|
||||
@@ -76,6 +82,7 @@ export default {
|
||||
if (this.lng) params.lng = this.lng
|
||||
if (this.lat) params.lat = this.lat
|
||||
this.$u.api.getStoreList(params).then(res => {
|
||||
if (seq !== this.reqSeq) return
|
||||
if (res.errcode === 0 && res.data) {
|
||||
const list = res.data.list || []
|
||||
if (this.pageNo === 1) {
|
||||
@@ -84,8 +91,11 @@ export default {
|
||||
this.list = this.list.concat(list)
|
||||
}
|
||||
this.total = res.data.total || 0
|
||||
// xuchao: 本页不足一页即已到尾部，钉住 total，防止 total 中途变大时空翻
|
||||
if (list.length < this.pageSize) this.total = this.list.length
|
||||
}
|
||||
}).finally(() => {
|
||||
if (seq !== this.reqSeq) return
|
||||
this.loading = false
|
||||
if (this.list.length === 0) {
|
||||
this.loadStatus = 'nomore'
|
||||
|
||||
Reference in New Issue
Block a user