vue_zhongyou 1.0.1

package//346/226/207/344/273/266//345/217/257/351/205/215/347/275/256/347/247/273/345/212/250/345/210/227/350/241/250/346/236/266/345/255/220.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="mobile-list" ref="listContainer">
+    <!-- 列表内容 -->
+    <div class="list-content">
+      <slot 
+        :items="displayItems" 
+        :loading="loading"
+        :finished="finished"
+      ></slot>
+    </div>
+    
+    <!-- 加载状态 -->
+    <div v-if="loading && !finished" class="loading-indicator">
+      <el-spinner size="small" />
+      <span class="loading-text">加载中...</span>
+    </div>
+    
+    <!-- 无更多数据提示 -->
+    <div v-if="finished && displayItems.length > 0" class="no-more-data">
+      <span>已无更多数据</span>
+    </div>
+    
+    <!-- 空状态 -->
+    <div v-if="!loading && displayItems.length === 0" class="empty-state">
+      <slot name="empty">
+        <div class="empty-content">
+          <el-icon size="40"><el-icon-document /></el-icon>
+          <p>暂无数据</p>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
+// import { ElSpinner, ElIcon } from 'element-plus'
+import { Document as ElIconDocument } from '@element-plus/icons-vue'
+
+// 定义 props
+const props = defineProps({
+  // 数据列表
+  items: {
+    type: Array,
+    default: () => []
+  },
+  // 每页数据量
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  // 总数据量
+  total: {
+    type: Number,
+    default: 0
+  },
+  // 是否正在加载
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  // 是否禁用上拉加载
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 触发加载更多的距离阈值(px)
+  offset: {
+    type: Number,
+    default: 50
+  },
+  // 是否立即加载第一页
+  immediate: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// 定义 emits
+const emit = defineEmits([
+  'load-more',
+  'update:loading'
+])
+
+// 响应式数据
+const listContainer = ref(null)
+const currentPage = ref(1)
+const finished = ref(false)
+
+// 计算显示的数据
+const displayItems = computed(() => {
+  const start = 0
+  const end = currentPage.value * props.pageSize
+  return props.items.slice(start, end)
+})
+
+// 检查是否已经加载完所有数据
+const checkFinished = () => {
+  finished.value = displayItems.value.length >= props.total
+}
+
+// 处理滚动事件
+const handleScroll = () => {
+  if (!listContainer.value || props.loading || props.disabled || finished.value) {
+    return
+  }
+  
+  const container = listContainer.value
+  const scrollTop = container.scrollTop
+  const scrollHeight = container.scrollHeight
+  const clientHeight = container.clientHeight
+  
+  // 当滚动到底部时触发加载更多
+  if (scrollTop + clientHeight >= scrollHeight - props.offset) {
+    loadMore()
+  }
+}
+
+// 加载更多数据
+const loadMore = () => {
+  if (finished.value || props.loading) return
+  
+  currentPage.value++
+  checkFinished()
+  
+  // 如果还有更多数据，则触发 load-more 事件
+  if (!finished.value) {
+    emit('load-more', currentPage.value)
+  }
+}
+
+// 重置列表状态
+const reset = (silent = false) => {
+  currentPage.value = 1
+  finished.value = false
+  checkFinished()
+  
+  // 如果不是静默重置，则触发第一页加载
+  if (!silent && props.immediate) {
+    emit('load-more', 1)
+  }
+}
+
+// 手动触发刷新
+const refresh = () => {
+  reset()
+}
+
+// 监听数据变化
+watch(() => props.items, () => {
+  checkFinished()
+}, { deep: true })
+
+// 监听总数据量变化
+watch(() => props.total, () => {
+  checkFinished()
+})
+
+// 添加滚动事件监听
+onMounted(() => {
+  if (listContainer.value) {
+    listContainer.value.addEventListener('scroll', handleScroll)
+  }
+  checkFinished()
+  
+  // 如果设置了立即加载且有数据需求，则触发第一页加载
+  if (props.immediate && props.total > 0 && props.items.length === 0) {
+    emit('load-more', 1)
+  }
+})
+
+// 移除滚动事件监听
+onUnmounted(() => {
+  if (listContainer.value) {
+    listContainer.value.removeEventListener('scroll', handleScroll)
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  reset,
+  refresh,
+  loadMore
+})
+</script>
+
+<style scoped>
+.mobile-list {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+}
+
+.list-content {
+  min-height: 100%;
+}
+
+.loading-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  color: #606266;
+}
+
+.loading-text {
+  margin-left: 8px;
+  font-size: 14px;
+}
+
+.no-more-data {
+  text-align: center;
+  padding: 16px;
+  color: #909399;
+  font-size: 14px;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  color: #909399;
+}
+
+.empty-content {
+  text-align: center;
+}
+
+.empty-content p {
+  margin-top: 12px;
+  font-size: 14px;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .mobile-list {
+    height: calc(100vh - 50px); /* 预留一些空间给其他元素 */
+  }
+}
+</style>