更新记录

1.0.0（2024-02-13） 下载此版本

展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项

平台兼容性

song-lazyLoadList

用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。开箱即用，最简单的列表懒加载组件。

代码演示

基础用法

<script setup>
  const useGetList = () => {
    const list = ref([])
    const totals = ref(0)
    const getList = async (pageNum) => {
      const { rows, total } = await getListPatrolRecord({
        pageNum: pageNum ? pageNum : 1,
        pageSize: 20,
      })
      list.value = list.value.concat(rows)
      totals.value = total
    }
    return {
      list,
      totals,
      getListPatrolRecords,
    }
  }
  const { list, getList, totals } = useGetList()
</script>

<template>
   
  <view>
       
    <song-lazyLoadList
      @loadMore="getList"
      :total="totals"
      :pageNum="1"
      :pageSize="20">
           
      <song-item
        v-for="item in list"
        :title="item.name"
        :content="item.content"></song-item>
         
    </song-lazyLoadList>
     
  </view>
</template>

注意

• 获取到的列表需要这么拼接起来: list.value = list.value.concat(rows)。
• 初次展示页面要进行一次请求 onLoad(() => getList())

song-lazyLoadList 属性

song-lazyLoadList 事件

song-item 属性

自定义 content 内容

如果 content 需要展示图片或者其他更复杂的内容则可以自定义内容。 content 属性去掉，在默认插槽里加任意内容

<song-item v-for="item in list" :title="item.name">
  <view class="content">
    <!---相关内容..... -->
  </view>
</song-item>