feat(infinite): add reverse prop, closes #6308

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+### NEXT_VERSION
+
+### Features
+
+- `n-infinite` adds `reverse` prop，closes [#6308](https://github.com/tusen-ai/naive-ui/issues/6308)
+
 ## 2.41.0
 
 ### Breaking Changes

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+### NEXT_VERSION
+
+### Features
+
+- `n-infinite` 新增 `reverse` 属性，关闭 [#6308](https://github.com/tusen-ai/naive-ui/issues/6308)
+
 ## 2.41.0
 
 `2025-01-05`

src/infinite-scroll/demos/enUS/basic.demo.vue

@@ -2,28 +2,38 @@
 # Basic
 </markdown>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 
-export default defineComponent({
-  setup() {
-    const count = ref(6)
-    const handleLoad = () => {
-      count.value += 1
-    }
-    return {
-      count,
-      handleLoad
-    }
+const dataRef = ref<number[]>([])
+const loading = ref(false)
+async function handleLoad() {
+  loading.value = true
+  try {
+    const data = await loadData()
+    dataRef.value.push(...data)
   }
-})
+  finally {
+    loading.value = false
+  }
+}
+function loadData(): Promise<number[]> {
+  const index = dataRef.value.length
+  const result = Array.from({ length: 10 })
+    .fill(null)
+    .map((_, i) => index + i + 1)
+  return new Promise(resolve => setTimeout(() => resolve(result), 1000))
+}
 </script>
 
 <template>
-  <n-infinite-scroll style="height: 240px" :distance="10" @load="handleLoad">
-    <div v-for="i in count" :key="i" class="item">
+  <n-infinite-scroll style="height: 240px" :distance="100" @load="handleLoad">
+    <div v-for="i in dataRef" :key="i" class="item">
       {{ i }}
     </div>
+    <div v-if="loading" class="text">
+      loading...
+    </div>
   </n-infinite-scroll>
 </template>
 
@@ -36,8 +46,10 @@ export default defineComponent({
   margin-bottom: 10px;
   background-color: rgba(0, 128, 0, 0.16);
 }
-
 .item:last-child {
   margin-bottom: 0;
 }
+.text {
+  text-align: center;
+}
 </style>

src/infinite-scroll/demos/enUS/index.demo-entry.md

@@ -8,6 +8,7 @@ Available since `2.38.2`.
 
 ```demo
 basic.vue
+reverse.vue
 chat.vue
 ```
 
@@ -18,5 +19,12 @@ chat.vue
 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
 | distance | `number` | `0` | Distance threshold that triggers loading. | 2.38.2 |
+| reverse | `boolean` | `false` | Whether to trigger load more from the top. Defaults to loading from bottom. | NEXT_VERSION |
 | scrollbar-props | `Object` | `undefined` | Attribute reference [Scrollbar props](scrollbar#Scrollbar-Props). | 2.38.2 |
 | on-load | `() => Promise<void> \| void` | `undefined` | The callback function when scrolling to the bottom. | 2.38.2 |
+
+### Infinite Slots
+
+| Name    | Parameters | Description        |
+| ------- | ---------- | ------------------ |
+| default | `()`       | Infinite's content |

src/infinite-scroll/demos/enUS/reverse.demo.vue

@@ -0,0 +1,61 @@
+<markdown>
+# Reverse
+</markdown>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const dataRef = ref<number[]>([])
+const loading = ref(false)
+async function handleLoad() {
+  loading.value = true
+  try {
+    const data = await loadData()
+    dataRef.value.unshift(...data)
+  }
+  finally {
+    loading.value = false
+  }
+}
+function loadData(): Promise<number[]> {
+  const index = dataRef.value.length
+  const result = Array.from({ length: 10 })
+    .fill(null)
+    .map((_, i) => index + i + 1)
+    .reverse()
+  return new Promise(resolve => setTimeout(() => resolve(result), 1000))
+}
+</script>
+
+<template>
+  <n-infinite-scroll
+    style="height: 240px"
+    reverse
+    :distance="100"
+    @load="handleLoad"
+  >
+    <div v-if="loading" class="text">
+      loading...
+    </div>
+    <div v-for="i in dataRef" :key="i" class="item">
+      {{ i }}
+    </div>
+  </n-infinite-scroll>
+</template>
+
+<style>
+.item {
+  display: flex;
+  align-items: center;
+  height: 46px;
+  justify-content: center;
+  margin-bottom: 10px;
+  background-color: rgba(0, 128, 0, 0.16);
+}
+.item:last-child {
+  margin-bottom: 0;
+}
+.text {
+  text-align: center;
+}
+</style>

src/infinite-scroll/demos/zhCN/basic.demo.vue

@@ -2,28 +2,38 @@
 # 基础
 </markdown>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 
-export default defineComponent({
-  setup() {
-    const count = ref(6)
-    const handleLoad = () => {
-      count.value += 1
-    }
-    return {
-      count,
-      handleLoad
-    }
+const dataRef = ref<number[]>([])
+const loading = ref(false)
+async function handleLoad() {
+  loading.value = true
+  try {
+    const data = await loadData()
+    dataRef.value.push(...data)
   }
-})
+  finally {
+    loading.value = false
+  }
+}
+function loadData(): Promise<number[]> {
+  const index = dataRef.value.length
+  const result = Array.from({ length: 10 })
+    .fill(null)
+    .map((_, i) => index + i + 1)
+  return new Promise(resolve => setTimeout(() => resolve(result), 1000))
+}
 </script>
 
 <template>
-  <n-infinite-scroll style="height: 240px" :distance="10" @load="handleLoad">
-    <div v-for="i in count" :key="i" class="item">
+  <n-infinite-scroll style="height: 240px" :distance="100" @load="handleLoad">
+    <div v-for="i in dataRef" :key="i" class="item">
       {{ i }}
     </div>
+    <div v-if="loading" class="text">
+      loading...
+    </div>
   </n-infinite-scroll>
 </template>
 
@@ -36,8 +46,10 @@ export default defineComponent({
   margin-bottom: 10px;
   background-color: rgba(0, 128, 0, 0.16);
 }
-
 .item:last-child {
   margin-bottom: 0;
 }
+.text {
+  text-align: center;
+}
 </style>

src/infinite-scroll/demos/zhCN/index.demo-entry.md

@@ -8,6 +8,7 @@
 
 ```demo
 basic.vue
+reverse.vue
 chat.vue
 ```
 
@@ -18,5 +19,12 @@ chat.vue
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
 | distance | `number` | `0` | 触发加载的距离阈值 | 2.38.2 |
+| reverse | `boolean` | `false` | 是否从顶部触发加载。默认从底部触发加载 | NEXT_VERSION |
 | scrollbar-props | `Object` | `undefined` | 属性参考 [Scrollbar props](scrollbar#Scrollbar-Props) | 2.38.2 |
 | on-load | `() => Promise<void> \| void` | `undefined` | 滚动到底部时的回调函数 | 2.38.2 |
+
+### Infinite Slots
+
+| 名称    | 参数 | 说明            |
+| ------- | ---- | --------------- |
+| default | `()` | Infinite 的内容 |

src/infinite-scroll/demos/zhCN/reverse.demo.vue

@@ -0,0 +1,61 @@
+<markdown>
+# 反向
+</markdown>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const dataRef = ref<number[]>([])
+const loading = ref(false)
+async function handleLoad() {
+  loading.value = true
+  try {
+    const data = await loadData()
+    dataRef.value.unshift(...data)
+  }
+  finally {
+    loading.value = false
+  }
+}
+function loadData(): Promise<number[]> {
+  const index = dataRef.value.length
+  const result = Array.from({ length: 10 })
+    .fill(null)
+    .map((_, i) => index + i + 1)
+    .reverse()
+  return new Promise(resolve => setTimeout(() => resolve(result), 1000))
+}
+</script>
+
+<template>
+  <n-infinite-scroll
+    style="height: 240px"
+    reverse
+    :distance="100"
+    @load="handleLoad"
+  >
+    <div v-if="loading" class="text">
+      loading...
+    </div>
+    <div v-for="i in dataRef" :key="i" class="item">
+      {{ i }}
+    </div>
+  </n-infinite-scroll>
+</template>
+
+<style>
+.item {
+  display: flex;
+  align-items: center;
+  height: 46px;
+  justify-content: center;
+  margin-bottom: 10px;
+  background-color: rgba(0, 128, 0, 0.16);
+}
+.item:last-child {
+  margin-bottom: 0;
+}
+.text {
+  text-align: center;
+}
+</style>