Browse Source

添加聊天页面下拉刷新功能并修复首页底部提示显示问题

主要修改:
1. 为聊天页面(pages/chat/index)添加下拉强制刷新数据功能
   - 配置scroll-view组件支持下拉刷新
   - 添加刷新状态变量和提示消息
   - 实现onPullDownRefresh方法,3秒刷新提示
   - 添加刷新动画效果和状态显示

2. 修复首页底部提示被遮挡问题
   - 调整页面布局高度约束
   - 确保'货源正在快马加鞭的赶来'提示正常显示

功能特点:
- 下拉刷新时清除缓存,强制从数据库获取最新数据
- 刷新过程中显示loading状态和3秒提示
- 刷新完成后显示'刷新完成'提示1秒后自动隐藏
- 保持原有聊天页面其他功能不变
pull/3/head^2
徐飞洋 2 months ago
parent
commit
872c8db08e
  1. 46
      pages/chat/index.js
  2. 17
      pages/chat/index.wxml
  3. 31
      pages/chat/index.wxss
  4. 19
      pages/index/index.wxml

46
pages/chat/index.js

@ -28,7 +28,9 @@ Page({
debugCount: 0, // 调试信息输出计数器
loginToastShown: false, // 登录提示是否已显示
lastLoadTime: 0, // 用于节流的时间戳
chatContentCache: {} // 缓存聊天项的内容,避免重复获取
chatContentCache: {}, // 缓存聊天项的内容,避免重复获取
isRefreshing: false, // 下拉刷新状态
refreshingMessage: '' // 刷新提示消息
},
onLoad: function (options) {
@ -601,8 +603,48 @@ Page({
});
},
// 下拉刷新恢复处理
onRestore: function () {
console.log('下拉刷新恢复');
},
onPullDownRefresh: function () {
this.loadChatList();
if (this.data.isRefreshing) {
return;
}
console.log('开始下拉刷新聊天列表...');
// 设置刷新状态和提示消息
this.setData({
isRefreshing: true,
refreshingMessage: '正在刷新...'
});
// 清除缓存,确保获取最新数据
this.setData({
chatContentCache: {},
lastLoadTime: 0 // 重置时间戳,强制刷新
}, () => {
// 执行刷新
this.loadChatList();
// 3秒后自动隐藏刷新提示
setTimeout(() => {
this.setData({
isRefreshing: false,
refreshingMessage: '刷新完成'
});
// 再过1秒后隐藏"刷新完成"提示
setTimeout(() => {
this.setData({
refreshingMessage: ''
});
}, 1000);
}, 3000);
});
wx.stopPullDownRefresh();
},

17
pages/chat/index.wxml

@ -12,8 +12,23 @@
/>
</view>
<!-- 刷新提示条 -->
<view wx:if="{{isRefreshing || refreshingMessage}}" class="refresh-tip">
<view class="refresh-spinner"></view>
<text class="refresh-text">{{refreshingMessage || '正在刷新...'}}</text>
</view>
<!-- 聊天列表 -->
<scroll-view scroll-y="true" class="chat-scroll-view">
<scroll-view
scroll-y="true"
class="chat-scroll-view"
refresher-enabled="{{true}}"
refresher-triggered="{{isRefreshing}}"
refresher-default-style="black"
refresher-background="transparent"
bindrefresherrefresh="onPullDownRefresh"
bindrefresherrestore="onRestore"
>
<view
wx:for="{{filteredChatList}}"
wx:key="id"

31
pages/chat/index.wxss

@ -137,4 +137,35 @@
font-size: 28rpx;
color: #999;
text-align: center;
}
/* 刷新提示条样式 */
.refresh-tip {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx;
background-color: #f0f0f0;
border-bottom: 1rpx solid #e5e5e5;
min-height: 60rpx;
}
.refresh-spinner {
width: 30rpx;
height: 30rpx;
border: 3rpx solid #ddd;
border-top: 3rpx solid #007aff;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 15rpx;
}
.refresh-text {
font-size: 26rpx;
color: #666;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

19
pages/index/index.wxml

@ -136,7 +136,7 @@
>
<view class="goods-list-container">
<!-- 网格布局 -->
<view class="grid-container" style="width: 725rpx; min-height: auto; height: auto; display: flex; box-sizing: border-box">
<view class="grid-container">
<view
class="grid-item"
wx:for="{{filteredGoods}}"
@ -153,16 +153,12 @@
class="product-media"
src="{{item.mediaItems[0].url}}"
mode="aspectFill"
show-center-play-btn="{{false}}"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
initial-time="0"
show-mute-btn="{{false}}"
enable-progress-gesture="{{false}}"
enable-play-gesture="{{true}}"
object-fit="fill"
poster=""
style="height: 270rpx; display: block; box-sizing: border-box; width: 337rpx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
@ -183,10 +179,10 @@
<view class="product-info" style="height: 181rpx; display: flex; box-sizing: border-box">
<view class="product-title" style="height: 35rpx; display: -webkit-box; box-sizing: border-box">{{item.name}}</view>
<view class="product-spec" style="width: 308rpx; height: 29rpx; display: block; box-sizing: border-box">{{item.displaySpecification}}<text wx:if="{{item.displayYolk}}"> | {{item.displayYolk}}</text></view>
<view class="product-status-row" style="width: 341rpx; display: block; box-sizing: border-box; height: 60rpx">
<view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}" style="width: 116rpx; display: inline-block; box-sizing: border-box">{{item.sourceType || ''}}</view>
<view class="product-status-row" style="width: 325rpx; display: block; box-sizing: border-box; height: 60rpx">
<view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
<view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}" style="width: 70rpx; display: inline-block; box-sizing: border-box">{{item.negotiateStatus}}</view>
<view class="status-tag item-count" style="width: 139rpx; display: inline-block; box-sizing: border-box">库存:{{item.totalStock && item.totalStock !== '充足' ? item.totalStock + '件' : (item.totalStock || '充足')}}</view>
<view class="status-tag item-count">库存:{{item.totalStock && item.totalStock !== '充足' ? item.totalStock + '件' : (item.totalStock || '充足')}}</view>
</view>
<view class="product-meta">
<text class="sales-count">已有{{item.reservedCount || 0}}人收藏</text>
@ -204,11 +200,10 @@
</view>
<!-- 无更多数据 -->
<view wx:if="{{filteredGoods.length > 0}}" class="no-more-data">
<view wx:if="{{!hasMoreData && filteredGoods.length > 0}}" class="no-more-data">
<text>货源正在快马加鞭的赶来</text>
</view>
<!-- 无商品时显示 -->
<view wx:if="{{filteredGoods.length === 0 && !isLoading}}" class="empty-goods">
<view class="empty-icon">📦</view>

Loading…
Cancel
Save