移动端用vant下拉刷新 上拉触底怎么做

在移动端使用vant组件库的下拉刷新和上拉加载更多非常简单。首先，你需要在页面中引入vant组件库的`PullRefresh`和`List`组件。

<template>
  <div>
    <van-pull-refresh :on-refresh="onRefresh">
      <van-list v-model="list" :finished="finished" @load="onLoad">
        <!-- 列表内容 -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { PullRefresh, List } from 'vant';

export default {
  components: {
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
  },
  data() {
    return {
      list: [],
      finished: false,
    };
  },
  methods: {
    onRefresh() {
      // 下拉刷新
      // 重新请求数据
    },
    onLoad() {
      // 上拉加载更多
      // 请求下一页数据
    },
  },
};
</script>

在上面的代码中，我们使用了`van-pull-refresh`组件来实现下拉刷新，使用了`van-list`组件来实现列表的展示和上拉加载更多。在`van-list`组件中，我们使用了`@load`事件来监听列表的滚动情况，当滚动到底部时触发`onLoad`方法，从而实现上拉加载更多的功能。

需要注意的是，当`finished`属性为`true`时，表示已经没有更多数据可以加载了，此时上拉加载更多功能将自动关闭。在`onLoad`方法中，你需要判断是否已经加载完了所有数据，如果是，则需要将`finished`属性设置为`true`。