taro vue3 小程序 上拉刷新

在 Taro Vue3 小程序中，可以通过使用 `scroll-view` 组件来实现上拉刷新的效果。以下是一个简单的示例代码：

<template>
  <scroll-view scroll-y="true" @scrolltolower="loadMore">
    <view v-for="(item, index) in itemList" :key="index">{{ item }}</view>
    <view v-if="loading">Loading...</view>
  </scroll-view>
</template>

<script>
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'

export default {
  setup() {
    const itemList = ref([])
    const loading = ref(false)

    const loadData = async () => {
      // 模拟异步加载数据
      loading.value = true
      await new Promise(resolve => setTimeout(resolve, 1000))
      const data = Array.from({ length: 10 }, (_, i) => `Item ${itemList.value.length + i}`)
      itemList.value = itemList.value.concat(data)
      loading.value = false
    }

    const loadMore = () => {
      if (!loading.value) {
        loadData()
      }
    }

    onMounted(() => {
      loadData()
    })

    return {
      itemList,
      loading,
      loadMore
    }
  }
}
</script>

在这个示例中，我们使用了 `scroll-view` 组件来展示一个列表，并且监听了 `scrolltolower` 事件来实现上拉加载更多的效果。在 `loadMore` 方法中，我们会判断当前是否正在加载数据，如果没有，则调用 `loadData` 方法来加载更多数据。在 `loadData` 方法中，我们使用了 `async/await` 来模拟异步加载数据的过程，并且在加载数据前将 `loading` 设置为 `true`，加载完成后将 `loading` 设置为 `false`。在加载完成后，我们将新的数据添加到 `itemList` 中。

这是一个非常简单的示例，你可以根据自己的需求来进行修改和扩展。