vue页面优化-滚动加载

<!-- 商品列表 -->
            <div class="mainList" :style="handleStyle"  v-infinite-scroll="loadMore" :infinite-scroll-disabled="busy" infinite-scroll-distance="150" infinite-scroll-throttle-delay="500">
                <div class="mainItem" v-for="(item,index) in skuList" :key="index" ></div>
</div>


const skuList = ref([])
const listPage = reactive({
  currPage: 1,
  pageSize: 10,
})
const busy = ref(true)//是否禁止滚动加载
const currentList = ref([])
const loadMore = () => {
    busy.value = true
    if (currentList.value.length < listPage.pageSize) {
        busy.value = true
      } else {
        listPage.currPage += 1
        getSkuList()
      }

} 
//获取sku列表
const getSkuList = () => {
    bottomLoading.value = true
    const reqData = { ...listQuery, ...listPage,shopNo:shopNo.value, runData:runData.value}
      api
        .getSkuList(reqData)
        .then((response) => {
            currentList.value = response.data
            skuList.value= [...skuList.value, ...currentList.value]
            busy.value = !currentList.value.length
        }).finally(()=>{
            setTimeout(() => {
            bottomLoading.value = false
            selectVisible.value = false
          }, 300)
        })
}