hookehuyr

fix(滚动列表): 修复滚动列表重置时位置不正确的问题

修复切换标签或视图模式时滚动列表位置未正确重置的问题
添加没有更多数据的提示样式
优化滚动列表的重置逻辑,使用随机数触发重新渲染
......@@ -40,8 +40,8 @@
</nut-sticky>
<!-- 消息列表内容 -->
<scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
@scroll="scroll" :lower-threshold="50" :enable-flex="false">
<scroll-view ref="scrollViewRef" class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
@scroll="scroll" :lower-threshold="100" :enable-flex="false" :scroll-top="scrollTop">
<view v-for="conversation in filteredConversations" :key="conversation.id"
class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2"
@click="onConversationClick(conversation)">
......@@ -73,6 +73,11 @@
<view v-if="loading" class="loading-container">
<text class="loading-text">加载中...</text>
</view>
<!-- 没有更多数据 -->
<view v-if="!hasMore && filteredConversations.length > 0" class="no-more">
<text class="no-more-text">没有更多消息了</text>
</view>
</scroll-view>
<!-- 自定义TabBar -->
......@@ -126,6 +131,10 @@ const scrollStyle = ref({
height: 'calc(100vh - 500rpx)'
})
// 滚动相关变量
const scrollViewRef = ref(null)
const scrollTop = ref(0)
// 搜索值
const searchValue = ref('')
const onBlurSearch = () => {
......@@ -213,8 +222,19 @@ const setActiveTab = (tabKey) => {
setTimeout(() => {
activeTab.value = tabKey;
// 重置搜索条件
searchValue.value = '';
// 重置分页状态
page.value = 1;
hasMore.value = true;
// 重置加载状态
loading.value = false;
// 重置滚动位置
scrollTop.value = Math.random(); // 使用随机数触发scroll-view重新渲染
setTimeout(() => {
scrollTop.value = 0; // 重置到顶部
}, 50);
// 重新初始化数据
initData();
// 添加淡入效果
......@@ -375,6 +395,19 @@ onMounted(() => {
color: #9ca3af;
}
/* 没有更多数据 */
.no-more {
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
}
.no-more-text {
font-size: 28rpx;
color: #9ca3af;
}
/* Tailwind CSS 类的补充样式 */
.w-12 {
width: 88rpx;
......
......@@ -41,8 +41,8 @@
<!-- 订单列表 -->
<view class="order-list">
<!-- 滚动列表 -->
<scroll-view class="order-scroll-view" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
@scroll="scroll" :lower-threshold="50" :enable-flex="false">
<scroll-view ref="scrollViewRef" class="order-scroll-view" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
@scroll="scroll" :lower-threshold="50" :enable-flex="false" :scroll-top="scrollTop">
<!-- 空状态 -->
<view v-if="filteredOrders.length === 0" class="empty-state">
<text class="empty-text">暂无订单</text>
......@@ -300,6 +300,10 @@ const scrollStyle = ref({
height: ''
})
// 滚动相关
const scrollViewRef = ref(null)
const scrollTop = ref(0)
// 页面状态
const activeTab = ref('all')
const viewMode = ref('bought')
......@@ -518,9 +522,8 @@ const setViewMode = (mode) => {
viewMode.value = mode
// 重置状态筛选标签到全部
activeTab.value = 'all'
resetListState()
// 重置加载更多的状态
hasMore.value = true
// 重置列表状态和数据
resetListState(true)
}
/**
......@@ -529,17 +532,34 @@ const setViewMode = (mode) => {
const setActiveTab = (tab) => {
activeTab.value = tab
// 重置列表加载状态
resetListState()
resetListState(false)
}
/**
* 重置列表状态
* @param {boolean} resetData - 是否重置已加载的数据
*/
const resetListState = () => {
const resetListState = (resetData = false) => {
loading.value = false
hasMore.value = true
// 重置加载索引,但不重置已加载的数据
// 这样切换标签时不会重复加载数据,但切换视图模式时会重置
// 重置滚动位置到顶部
scrollTop.value = Math.random() // 使用随机数触发scroll-view重新渲染
if (resetData) {
// 重置已加载的数据索引
loadedBoughtIndex.value = 0
loadedSoldIndex.value = 0
// 重置订单数据到初始状态
boughtOrders.value = boughtOrders.value.slice(0, 5) // 保留前5条初始数据
soldOrders.value = soldOrders.value.slice(0, 5) // 保留前5条初始数据
}
// 延迟重置scrollTop为0,确保滚动位置正确
setTimeout(() => {
scrollTop.value = 0
}, 50)
}
/**
......