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