uni-app 使用vue3 ts语法 setup语法糖 具备上滑加载下拉刷新的列表页面

uni-app 是一款基于 Vue.js 的跨平台开发框架，支持同时开发微信小程序、H5、App 等多个平台，使用 Vue3 和 TypeScript 语法的 setup 语法糖可以更方便地编写组件逻辑。关于上滑加载下拉刷新的列表页面，可以使用 uni-app 内置的组件 `uni-list` 和 `uni-scroll-view` 来实现。

首先，使用 `uni-list` 组件来呈现列表数据，例如：

<template>
  <uni-list>
    <uni-list-item v-for="(item, index) in list" :key="index">
      {{ item }}
    </uni-list-item>
  </uni-list>
</template>

然后，在 `uni-scroll-view` 组件中监听 `scrolltolower` 事件，当滚动到底部时触发加载更多数据的逻辑，例如：

<template>
  <uni-scroll-view class="list-wrapper" :scroll-y="true" @scrolltolower="loadMore">
    <uni-list>
      <uni-list-item v-for="(item, index) in list" :key="index">
        {{ item }}
      </uni-list-item>
    </uni-list>
  </uni-scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const list = ref<string[]>([]);

function loadMore() {
  // 加载更多数据的逻辑
}
</script>

对于下拉刷新，可以使用 `uni-scroll-view` 组件的 `enable-flex` 属性启用弹性布局，然后监听 `scrolltoupper` 事件，在事件处理函数中执行刷新数据的逻辑，例如：

<template>
  <uni-scroll-view class="list-wrapper" :scroll-y="true" :enable-flex="true" @scrolltoupper="refresh">
    <uni-list>
      <uni-list-item v-for="(item, index) in list" :key="index">
        {{ item }}
      </uni-list-item>
    </uni-list>
  </uni-scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const list = ref<string[]>([]);

function loadMore() {
  // 加载更多数据的逻辑
}

function refresh() {
  // 刷新数据的逻辑
}
</script>

需要注意的是，上滑加载和下拉刷新的具体实现逻辑可能有所不同，具体可以根据实际情况进行调整。