From 4515d4f9f3dca2a4fcae9c957d5460f6312b0128 Mon Sep 17 00:00:00 2001
From: lxx <2399270194@qq.com>
Date: Thu, 28 Sep 2023 16:50:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9Escrollview=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/lx-header/lx-header.vue        |   2 +-
 .../lx-list-scroll/lx-list-scroll.vue         | 100 ++++++++++++++++++
 src/components/lx-list/lx-list.vue            |  60 ++++++++---
 src/hooks/useListLoadClass.ts                 |  22 ++--
 src/pages.json                                |   9 ++
 src/pages/index/index.vue                     |   2 +-
 src/pages/listDemo/listDemo.vue               |  17 +--
 src/pages/listDemo/listDemoScroll.vue         |  23 ++++
 8 files changed, 200 insertions(+), 35 deletions(-)
 create mode 100644 src/components/lx-list-scroll/lx-list-scroll.vue
 create mode 100644 src/pages/listDemo/listDemoScroll.vue

diff --git a/src/components/lx-header/lx-header.vue b/src/components/lx-header/lx-header.vue
index 9d5bcab..8a035bd 100644
--- a/src/components/lx-header/lx-header.vue
+++ b/src/components/lx-header/lx-header.vue
@@ -82,7 +82,7 @@ const style = computed(() => {
 const goBack = () => {
     if (getCurrentPages().length <= 1) {
         goToPage({
-            url: '/pages/index/index',
+            url: 'pages/index/index',
             mode: 'redirectTo'
         })
     } else {
diff --git a/src/components/lx-list-scroll/lx-list-scroll.vue b/src/components/lx-list-scroll/lx-list-scroll.vue
new file mode 100644
index 0000000..6860f98
--- /dev/null
+++ b/src/components/lx-list-scroll/lx-list-scroll.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/*
+ * @description: 分页组件(scroll-view版)
+ * @fileName: lx-list-scroll.vue
+ * @params {Function} api : 数据请求的接口API
+ * @params {Function} afterLoadData : 数据请求完毕前置处理方法
+ * @params {Boolean} isNeedSearch : 是否需要搜索
+ * @params {Number} scrollTopThreshold : 使得搜索框上方固定滑动的阈值
+ * @params {object: any} options : 数据请求的额外参数
+ * @params {Function} scrollTolower: 页面触底事件
+ * @author: lxx
+ * @date: 2023-07-28 11:36:23
+ * @updateDate: 2023-09-28 09:36:23
+ * @version: V1.0.1
+ */
+import { LoadData } from '@/hooks/useListLoadClass'
+import { debounce } from '@/utils/util'
+
+type listPropsInt = {
+    api: Function
+    afterLoadData?: Function
+    isNeedSearch?: boolean
+    options?: any
+    scrollTopThreshold?: number
+}
+
+// 接收传值
+const props = withDefaults(defineProps<listPropsInt>(), {
+    isNeedSearch: true,
+    options: {},
+    scrollTopThreshold: 50
+})
+const { options, api, afterLoadData } = toRefs(props)
+
+// 分页相关
+const { list, isLoading, isEmpty, isNoData, setParams, LoadMore } = LoadData({
+    api: api.value,
+    afterLoadData: afterLoadData?.value,
+    options: options.value,
+    isNeedReachBottom: false
+})
+
+// 搜索相关
+const inputTxt = ref('')
+const inputChange = debounce(() => {
+    console.log('input change')
+    setParams({ search: inputTxt.value })
+})
+
+// 页面滚动相关
+const scrollTop = ref(0)
+const scroll = (e: any) => {
+    scrollTop.value = e.detail.scrollTop
+}
+const emit = defineEmits(['scrollTolower'])
+const scrolltolower = () => {
+    console.log('触底啦！')
+    LoadMore()
+    emit('scrollTolower')
+}
+</script>
+<template>
+    <scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll" @scrolltolower="scrolltolower">
+        <view
+            class="search_box"
+            v-if="isNeedSearch"
+            :class="{ lxx_scroll_fixed: isNeedSearch && scrollTop > scrollTopThreshold }"
+            :style="{ top: scrollTop + 'px' }"
+        >
+            <u-search placeholder="请输入搜索内容" v-model="inputTxt" @change="inputChange" :show-action="false"></u-search>
+        </view>
+        <!-- 防止页面上顶 -->
+        <view class="search_box" v-if="isNeedSearch && isNeedSearch && scrollTop > scrollTopThreshold">
+            <u-search placeholder="请输入搜索内容" v-model="inputTxt" @change="inputChange" :show-action="false"></u-search>
+        </view>
+        <view class="lxx_list_box">
+            <view v-for="(item, index) in list" :key="index">
+                <slot v-bind:item="item" v-bind:index="index"></slot>
+            </view>
+        </view>
+        <lx-list-state :is-empty="isEmpty" :is-loading="isLoading" :is-no-data="isNoData"></lx-list-state>
+    </scroll-view>
+</template>
+<style lang="scss" scoped>
+.scroll-Y {
+    height: 100%;
+    position: relative;
+
+    .search_box {
+        padding: 10rpx 20rpx;
+        width: 100%;
+        box-sizing: border-box;
+        background-color: #ffffff;
+    }
+
+    .lxx_scroll_fixed {
+        position: absolute;
+    }
+}
+</style>
diff --git a/src/components/lx-list/lx-list.vue b/src/components/lx-list/lx-list.vue
index ca6c438..745a5c6 100644
--- a/src/components/lx-list/lx-list.vue
+++ b/src/components/lx-list/lx-list.vue
@@ -2,37 +2,36 @@
 /*
  * @description: 分页组件
  * @fileName: List.vue
- * @params  api : 数据请求的apiFunction
+ * @params {Function} api : 数据请求的接口API
+ * @params {Function} afterLoadData : 数据请求完毕前置处理方法
+ * @params {Boolean} isNeedSearch : 是否需要搜索
+ * @params {Boolean} isFixedSearch : 是否需要固定定位搜索框
+ * @params {object: any} options : 数据请求的额外参数
  * @author: lxx
  * @date: 2023-07-28 11:36:23
  * @version: V1.0.0
  */
 import { LoadData } from '@/hooks/useListLoadClass'
-import { ref } from 'vue'
 import { debounce } from '@/utils/util'
-import { toRefs } from 'vue'
 
 type listPropsInt = {
     api: Function
     afterLoadData?: Function
     isNeedSearch?: boolean
+    isFixedSearch?: boolean
     options?: any
 }
 
 const props = withDefaults(defineProps<listPropsInt>(), {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    api: () => {},
     isNeedSearch: true,
+    isFixedSearch: true,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     options: {}
 })
 
 const inputTxt = ref('')
 let { options, api, afterLoadData } = toRefs(props)
-if (props.isNeedSearch) {
-    let obj = { type: 2 }
-    options.value = Object.assign(options.value, obj)
-}
+
 let { list, isLoading, isEmpty, isNoData, setParams } = LoadData({
     api: api.value,
     afterLoadData: afterLoadData?.value,
@@ -43,18 +42,45 @@ const inputChange = debounce(() => {
     console.log('input change')
     setParams({ search: inputTxt.value })
 })
+
+// 用于父组件设置额外的参数（选项卡切换的时候使用）
+const setParam = (obj: any) => {
+    const param = ref<{
+        search?: string
+        [key: string]: any
+    }>({})
+    if (props.isNeedSearch) {
+        param.value.search = inputTxt.value
+    }
+    param.value = { ...obj }
+    setParams({ ...param.value })
+}
+defineExpose({
+    setParam
+})
 </script>
 <template>
-    <view class="search_box" v-if="isNeedSearch">
-        <u-search placeholder="请输入搜索内容" v-model="inputTxt" @change="inputChange" :show-action="false"></u-search>
-    </view>
-    <view v-for="(item, index) in list" :key="index">
-        <slot v-bind:item="item" v-bind:index="index"></slot>
+    <view class="lxx_list_box">
+        <view class="search_box" v-if="isNeedSearch" :style="{ position: isFixedSearch ? 'fixed' : 'unset' }">
+            <u-search placeholder="请输入搜索内容" v-model="inputTxt" @change="inputChange" :show-action="false"></u-search>
+        </view>
+        <view class="lxx_list_box_content" :style="{ paddingTop: isFixedSearch ? '100rpx' : 'unset' }">
+            <view v-for="(item, index) in list" :key="index">
+                <slot v-bind:item="item" v-bind:index="index"></slot>
+            </view>
+        </view>
+        <lx-list-state :is-empty="isEmpty" :is-loading="isLoading" :is-no-data="isNoData"></lx-list-state>
     </view>
-    <lx-list-state :is-empty="isEmpty" :is-loading="isLoading" :is-no-data="isNoData"></lx-list-state>
 </template>
 <style lang="scss" scoped>
-.search_box {
-    padding: 10rpx 20rpx;
+.lxx_list_box {
+    position: relative;
+    .search_box {
+        padding: 10rpx 20rpx;
+        width: 100%;
+        height: 90rpx;
+        background-color: #fff;
+        box-sizing: border-box;
+    }
 }
 </style>
diff --git a/src/hooks/useListLoadClass.ts b/src/hooks/useListLoadClass.ts
index 3601871..e9755c2 100644
--- a/src/hooks/useListLoadClass.ts
+++ b/src/hooks/useListLoadClass.ts
@@ -5,9 +5,6 @@
  * @date: 2023-07-08 08:55:52
  * @version: V1.0.0
  */
-import { ref, computed } from 'vue'
-import { onReachBottom } from '@dcloudio/uni-app'
-
 class LoadDataClass {
     // 请求参数
     static queryParams = {
@@ -43,7 +40,7 @@ class LoadDataClass {
     constructor(apiFunctions: Function, afterLoadData?: Function, options: any = {}) {
         this.Query = apiFunctions
         this.afterLoadData = afterLoadData
-        console.log('options', options)
+        // console.log('options', options)
         // 存在额外参数拼接
         this.setParams(options)
     }
@@ -117,22 +114,27 @@ interface LoadDataInt {
     api: Function
     afterLoadData?: Function
     options?: any
+    isNeedReachBottom?: boolean
 }
 
-export function LoadData({ api, afterLoadData, options }: LoadDataInt) {
+export function LoadData({ api, afterLoadData, options, isNeedReachBottom = true }: LoadDataInt) {
     const data = new LoadDataClass(api, afterLoadData, options)
 
     // 下拉加载
-    onReachBottom(() => {
-        console.log('onReachBottom')
-        data.LoadMore()
-    })
+    if (isNeedReachBottom) {
+        onReachBottom(() => {
+            console.log('onReachBottom')
+            data.LoadMore()
+        })
+    }
+
     return {
         list: data.list,
         isLoading: data.isLoading,
         isNoData: data.isNoData,
         isEmpty: data.isEmpty,
         ReLoad: data.ReLoad,
-        setParams: data.setParams
+        setParams: data.setParams,
+        LoadMore: data.LoadMore
     }
 }
diff --git a/src/pages.json b/src/pages.json
index 5db785a..31f0a63 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -34,6 +34,15 @@
                 "enablePullDownRefresh": false,
                 "navigationStyle": "custom"
             }
+        },
+        {
+            "name": "listDemo",
+            "path": "pages/listDemo/listDemoScroll",
+            "style": {
+                "navigationBarTitleText": "列表页-scrollview版",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
         }
     ],
     "subPackages": [
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 89b98a6..4a1c432 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -32,7 +32,7 @@ console.log('xxx', formatTime(Date.now(), 'yyyy-MM-dd'))
 
         <button @click="logout">退出</button>
         <button @tap="showDialog">弹窗</button>
-        <button @tap="throttles">弹窗</button>
+        <button @tap="throttles">列表测试</button>
 
         <ex-dialog ref="dialogRef" :show-cancel-button="true">
             <view>模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作</view>
diff --git a/src/pages/listDemo/listDemo.vue b/src/pages/listDemo/listDemo.vue
index 3d36fcd..82a2518 100644
--- a/src/pages/listDemo/listDemo.vue
+++ b/src/pages/listDemo/listDemo.vue
@@ -7,15 +7,20 @@ const afterLoadData = (data: any) => {
     //     v.name = '你猜'
     // })
 }
+// 待完成（报错）
+// const lxList = ref(null)
+// onMounted(() => {
+//     console.log('lxList.value', lxList.value)
+// })
 </script>
 
 <template>
-    <view>
-        <lx-header :title="'列表测试页面'"></lx-header>
-        <lx-list :api="demo" :after-load-data="afterLoadData">
-            <template v-slot="{ item, index }">{{ index }} ---- {{ item }}</template>
-        </lx-list>
-    </view>
+    <lx-header :title="'列表测试页面'"></lx-header>
+    <lx-list ref="lxList" :api="demo" :after-load-data="afterLoadData">
+        <template v-slot="{ item, index }">
+            <view>{{ index }} ---- {{ item }}</view>
+        </template>
+    </lx-list>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/pages/listDemo/listDemoScroll.vue b/src/pages/listDemo/listDemoScroll.vue
new file mode 100644
index 0000000..129bf62
--- /dev/null
+++ b/src/pages/listDemo/listDemoScroll.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { demo } from '@/apis/demo'
+
+const afterLoadData = (data: any) => {
+    console.log(789, data)
+    // data.data.items.map((v: any) => {
+    //     v.name = '你猜'
+    // })
+}
+</script>
+
+<template>
+    <view>
+        <lx-header :title="'列表测试页面(scroll-view)'"></lx-header>
+        <view style="height: 800rpx">
+            <lx-list-scroll :api="demo" :after-load-data="afterLoadData">
+                <template v-slot="{ item, index }">{{ index }} ---- {{ item }}</template>
+            </lx-list-scroll>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped></style>
-- 
Gitee


From 5d5200a14829e9c983c2cf7993152e39257bf3a1 Mon Sep 17 00:00:00 2001
From: lxx <2399270194@qq.com>
Date: Fri, 13 Oct 2023 10:54:55 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8scrollView=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lx-list-scroll/lx-list-scroll.vue         |   1 +
 src/components/lx-list/lx-list.vue            | 106 ++++++++++++++----
 src/pages/listDemo/listDemo.vue               |  13 +--
 src/pages/listDemo/listDemoScroll.vue         |   4 +-
 4 files changed, 95 insertions(+), 29 deletions(-)

diff --git a/src/components/lx-list-scroll/lx-list-scroll.vue b/src/components/lx-list-scroll/lx-list-scroll.vue
index 6860f98..260fc85 100644
--- a/src/components/lx-list-scroll/lx-list-scroll.vue
+++ b/src/components/lx-list-scroll/lx-list-scroll.vue
@@ -52,6 +52,7 @@ const scrollTop = ref(0)
 const scroll = (e: any) => {
     scrollTop.value = e.detail.scrollTop
 }
+
 const emit = defineEmits(['scrollTolower'])
 const scrolltolower = () => {
     console.log('触底啦！')
diff --git a/src/components/lx-list/lx-list.vue b/src/components/lx-list/lx-list.vue
index 745a5c6..9475baf 100644
--- a/src/components/lx-list/lx-list.vue
+++ b/src/components/lx-list/lx-list.vue
@@ -5,46 +5,57 @@
  * @params {Function} api : 数据请求的接口API
  * @params {Function} afterLoadData : 数据请求完毕前置处理方法
  * @params {Boolean} isNeedSearch : 是否需要搜索
- * @params {Boolean} isFixedSearch : 是否需要固定定位搜索框
+ * @params {Boolean} isFixedSearch : 是否需要固定定位搜索框(仅listType：'default'有效)
  * @params {object: any} options : 数据请求的额外参数
+ * @params {'default' | 'scrollView'} listType :  scrollView为scroll-view包裹的分页
+ * @params {number} scrollTopThreshold : 用于指定滚动条距离顶部的阈值->触发输入框固定 (仅listType：'scrollView'有效)
+ * @ref setListParams {Function} : 使用==>ref.value.setListParams(obj, isClear) obj:请求额外的参数 isClear是否清空请求参数
  * @author: lxx
  * @date: 2023-07-28 11:36:23
- * @version: V1.0.0
+ * @update: 2023-10-13 10:34:03
+ * @version: V1.0.1
  */
 import { LoadData } from '@/hooks/useListLoadClass'
 import { debounce } from '@/utils/util'
-
-type listPropsInt = {
+interface listPropsInt {
     api: Function
     afterLoadData?: Function
     isNeedSearch?: boolean
     isFixedSearch?: boolean
     options?: any
+    scrollTopThreshold?: number
+    listType?: 'default' | 'scrollView'
 }
 
+// 接收传值
+// 3.2.x defineProps泛型类型参数仅限于类型文字或对本地接口的引用
 const props = withDefaults(defineProps<listPropsInt>(), {
+    api: () => ({}),
     isNeedSearch: true,
     isFixedSearch: true,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    options: {}
+    options: {},
+    scrollTopThreshold: 50,
+    listType: 'default'
 })
-
-const inputTxt = ref('')
 let { options, api, afterLoadData } = toRefs(props)
 
-let { list, isLoading, isEmpty, isNoData, setParams } = LoadData({
+// 分页相关
+let { list, isLoading, isEmpty, isNoData, setParams, LoadMore } = LoadData({
     api: api.value,
     afterLoadData: afterLoadData?.value,
     options: options.value
 })
 
+// 搜索相关
+const inputTxt = ref('')
 const inputChange = debounce(() => {
     console.log('input change')
     setParams({ search: inputTxt.value })
 })
 
 // 用于父组件设置额外的参数（选项卡切换的时候使用）
-const setParam = (obj: any) => {
+const setListParams = (obj: any, isClear = false) => {
     const param = ref<{
         search?: string
         [key: string]: any
@@ -53,28 +64,66 @@ const setParam = (obj: any) => {
         param.value.search = inputTxt.value
     }
     param.value = { ...obj }
-    setParams({ ...param.value })
+    setParams({ ...param.value }, isClear)
 }
 defineExpose({
-    setParam
+    setListParams
 })
+// 页面滚动相关
+const scrollTop = ref(0)
+const scroll = (e: any) => {
+    scrollTop.value = e.detail.scrollTop
+}
+
+const emit = defineEmits(['scrollTolower'])
+const scrolltolower = () => {
+    console.log('触底啦！')
+    LoadMore()
+    emit('scrollTolower')
+}
 </script>
 <template>
-    <view class="lxx_list_box">
-        <view class="search_box" v-if="isNeedSearch" :style="{ position: isFixedSearch ? 'fixed' : 'unset' }">
-            <u-search placeholder="请输入搜索内容" v-model="inputTxt" @change="inputChange" :show-action="false"></u-search>
-        </view>
-        <view class="lxx_list_box_content" :style="{ paddingTop: isFixedSearch ? '100rpx' : 'unset' }">
-            <view v-for="(item, index) in list" :key="index">
-                <slot v-bind:item="item" v-bind:index="index"></slot>
+    <template v-if="listType == 'default'">
+        <view class="lxx_list_box">
+            <view class="search_box" v-if="isNeedSearch" :style="{ position: isFixedSearch ? 'fixed' : 'unset' }">
+                <u-search placeholder="请输入搜索内容" v-model="inputTxt" @change="inputChange" :show-action="false"></u-search>
+            </view>
+            <view class="lxx_list_box_content" :style="{ paddingTop: isFixedSearch ? '100rpx' : 'unset' }">
+                <view v-for="(item, index) in list" :key="index">
+                    <slot v-bind:item="item" v-bind:index="index"></slot>
+                </view>
             </view>
+            <lx-list-state :is-empty="isEmpty" :is-loading="isLoading" :is-no-data="isNoData"></lx-list-state>
         </view>
-        <lx-list-state :is-empty="isEmpty" :is-loading="isLoading" :is-no-data="isNoData"></lx-list-state>
-    </view>
+    </template>
+
+    <template v-else>
+        <scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll" @scrolltolower="scrolltolower">
+            <view
+                class="search_box"
+                v-if="isNeedSearch"
+                :class="{ lxx_scroll_fixed: isNeedSearch && scrollTop > scrollTopThreshold }"
+                :style="{ top: scrollTop + 'px' }"
+            >
+                <u-search placeholder="请输入搜索内容" v-model="inputTxt" @change="inputChange" :show-action="false"></u-search>
+            </view>
+            <!-- 防止页面上顶 -->
+            <view class="search_box" v-if="isNeedSearch && isNeedSearch && scrollTop > scrollTopThreshold">
+                <u-search placeholder="请输入搜索内容" v-model="inputTxt" @change="inputChange" :show-action="false"></u-search>
+            </view>
+            <view class="lxx_list_box">
+                <view v-for="(item, index) in list" :key="index">
+                    <slot v-bind:item="item" v-bind:index="index"></slot>
+                </view>
+            </view>
+            <lx-list-state :is-empty="isEmpty" :is-loading="isLoading" :is-no-data="isNoData"></lx-list-state>
+        </scroll-view>
+    </template>
 </template>
 <style lang="scss" scoped>
 .lxx_list_box {
     position: relative;
+
     .search_box {
         padding: 10rpx 20rpx;
         width: 100%;
@@ -83,4 +132,21 @@ defineExpose({
         box-sizing: border-box;
     }
 }
+
+.scroll-Y {
+    height: 100%;
+    position: relative;
+
+    .search_box {
+        padding: 10rpx 20rpx;
+        width: 100%;
+        box-sizing: border-box;
+        background-color: #ffffff;
+        z-index: 2;
+    }
+
+    .lxx_scroll_fixed {
+        position: absolute;
+    }
+}
 </style>
diff --git a/src/pages/listDemo/listDemo.vue b/src/pages/listDemo/listDemo.vue
index 82a2518..30bec5b 100644
--- a/src/pages/listDemo/listDemo.vue
+++ b/src/pages/listDemo/listDemo.vue
@@ -1,22 +1,21 @@
 <script lang="ts" setup>
 import { demo } from '@/apis/demo'
-
 const afterLoadData = (data: any) => {
     console.log(789, data)
     // data.data.items.map((v: any) => {
     //     v.name = '你猜'
     // })
 }
-// 待完成（报错）
-// const lxList = ref(null)
-// onMounted(() => {
-//     console.log('lxList.value', lxList.value)
-// })
+const lxListRef = ref()
+onReady(() => {
+    lxListRef.value.setListParams({ name: 2 })
+    console.log('lxList.value', lxListRef.value)
+})
 </script>
 
 <template>
     <lx-header :title="'列表测试页面'"></lx-header>
-    <lx-list ref="lxList" :api="demo" :after-load-data="afterLoadData">
+    <lx-list ref="lxListRef" :api="demo" :after-load-data="afterLoadData">
         <template v-slot="{ item, index }">
             <view>{{ index }} ---- {{ item }}</view>
         </template>
diff --git a/src/pages/listDemo/listDemoScroll.vue b/src/pages/listDemo/listDemoScroll.vue
index 129bf62..e8e68b5 100644
--- a/src/pages/listDemo/listDemoScroll.vue
+++ b/src/pages/listDemo/listDemoScroll.vue
@@ -13,9 +13,9 @@ const afterLoadData = (data: any) => {
     <view>
         <lx-header :title="'列表测试页面(scroll-view)'"></lx-header>
         <view style="height: 800rpx">
-            <lx-list-scroll :api="demo" :after-load-data="afterLoadData">
+            <lx-list :listType="'scrollView'" :api="demo" :after-load-data="afterLoadData">
                 <template v-slot="{ item, index }">{{ index }} ---- {{ item }}</template>
-            </lx-list-scroll>
+            </lx-list>
         </view>
     </view>
 </template>
-- 
Gitee