uniapp+vue3中下拉加载封装

在 UniApp 和 Vue3 中封装下拉加载功能可以通过自定义指令来实现。下面是一个简单的封装示例：

1. 创建一个名为 `loadmore` 的自定义指令。

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('loadmore', {
  mounted(el, binding) {
    const selectWrap = el.querySelector('.uni-scroll-wrapper')
    selectWrap.addEventListener('scroll', function() {
      const scrollDistance = selectWrap.scrollHeight - selectWrap.clientHeight - selectWrap.scrollTop
      if (scrollDistance <= binding.value.distance) {
        binding.value.callback()
      }
    })
  }
})

app.mount('#app')

2. 在需要应用下拉加载的组件中使用自定义指令。

<template>
  <div class="container">
    <ul class="list" v-loadmore="{ distance: 50, callback: loadMoreData }">
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      // 发起请求获取数据，这里使用 setTimeout 模拟异步请求
      setTimeout(() => {
        const newData = // 获取新的数据
        this.list = this.list.concat(newData)
        this.page++
      }, 500)
    },
    loadMoreData() {
      // 下拉加载更多数据
      this.loadData()
    }
  }
}
</script>

在上述示例中，我们创建了一个自定义指令 `loadmore`，并将其应用在包含列表的 `<ul>` 元素上。指令的参数是一个对象，包含了两个属性：`distance` 表示距离底部多少距离触发加载更多的回调函数，`callback` 表示加载更多数据的回调函数。当滚动到距离底部小于等于指定距离时，会触发回调函数加载更多数据。

希望这个简单的封装示例能够帮助到你！