包含多个会话的累积代码变更: - backend: AI 聊天服务、触发器调度、认证增强、WebSocket、调度器最小间隔 - admin-web: ETL 状态页、任务管理、调度配置、登录优化 - miniprogram: 看板页面、聊天集成、UI 组件、导航更新 - etl: DWS 新任务(finance_area_daily/board_cache)、连接器增强 - tenant-admin: 项目初始化 - db: 19 个迁移脚本(etl_feiqiu 11 + zqyy_app 8) - packages/shared: 枚举和工具函数更新 - tools: 数据库工具、报表生成、健康检查 - docs: PRD/架构/部署/合约文档更新 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2.7 KiB
2.7 KiB
P6→NS1/RNS1 缺失项 #5:下拉刷新/触底加载的动画规范
简要结论
- 状态:✅ 已解决
- 风险等级:🟡 低
- 已实现下拉刷新、触底加载、骨架屏 loading、错误重试的完整交互链路。
详细审查
审查范围
apps/miniprogram/miniprogram/pages/task-list/task-list.ts— onPullDownRefresh / onReachBottom / loadDataapps/miniprogram/miniprogram/pages/task-list/task-list.wxml— skeleton 骨架屏apps/miniprogram/miniprogram/pages/task-list/task-list.wxss— loading 样式
发现
下拉刷新(已实现):
onPullDownRefresh() {
this.loadData(() => {
wx.stopPullDownRefresh()
})
}
使用微信原生下拉刷新机制,刷新完成后调用 wx.stopPullDownRefresh() 停止动画。
触底加载(已实现):
onReachBottom() {
if (!this.data.hasMore) return
this.setData({ hasMore: false })
wx.showToast({ title: '没有更多了', icon: 'none' })
}
当前为简化实现(一次性加载),触底时显示「没有更多了」提示。后端已支持分页参数(page/page_size)。
骨架屏 Loading(已实现):
<view class="state-loading" wx:if="{{pageState === 'loading'}}">
<view class="loading-placeholder" wx:for="{{[1,2,3]}}" wx:key="*this">
<view class="ph-line ph-line--title"></view>
<view class="ph-line ph-line--body"></view>
<view class="ph-line ph-line--short"></view>
</view>
</view>
3 个占位卡片,每个含标题行、内容行、短行,模拟真实卡片布局。
错误重试(已实现):
<view class="state-error" wx:if="{{pageState === 'error'}}">
<text class="error-text">加载失败,请重试</text>
<view class="retry-btn" bindtap="onRetry">重试</view>
</view>
task-detail 页面也有完整状态管理:
- loading:使用
t-loading组件的 circular 主题浮层 - empty:
t-iconinfo-circle + 文案 - error:
t-iconclose-circle + 重试按钮
证据
骨架屏样式(task-list.wxss):
.loading-placeholder {
background: #ffffff;
border-radius: 22rpx;
padding: 29rpx;
margin-bottom: 22rpx;
}
.ph-line { height: 22rpx; background: #f3f3f3; border-radius: 7rpx; margin-bottom: 15rpx; }
.ph-line--title { width: 40%; height: 29rpx; }
.ph-line--body { width: 80%; }
.ph-line--short { width: 55%; }
建议(如未完全解决)
- 触底加载目前是简化实现,未真正调用分页接口加载下一页。后端已支持
page/page_size参数,前端需补充增量加载逻辑 - 骨架屏可考虑使用 TDesign 的
t-skeleton组件替代自定义实现,获得更丰富的动画效果 - 可添加下拉刷新时的自定义 loading 动画(当前使用微信原生样式)