.listContainer { display: flex; flex-direction: column; overflow: hidden; position: relative; } .listItem { flex-shrink: 0; width: 100%; } .loadMoreButtonContainer { display: flex; justify-content: center; align-items: center; padding: 16px; flex-shrink: 0; } .noMoreText { text-align: center; color: #999; font-size: 14px; padding: 16px; flex-shrink: 0; } .emptyState { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #999; flex: 1; min-height: 200px; } .emptyIcon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; } .emptyText { font-size: 14px; color: #999; } .pullToRefresh { height: 100%; overflow: auto; } // 自定义滚动条样式 .listContainer::-webkit-scrollbar { width: 4px; } .listContainer::-webkit-scrollbar-track { background: transparent; } .listContainer::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 2px; } .listContainer::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); } // 响应式设计 @media (max-width: 768px) { .listContainer { padding: 0 8px; } .loadMoreButtonContainer { padding: 12px; } .noMoreText { padding: 12px; } }