vant实现下拉刷新和上拉加载_vue使用vant-ui实现上拉加载、下拉刷新和返回顶部...

vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

vue现在在移动端常用的ui库有vant-ui和mint-ui，上拉加载、下拉刷新和返回顶部也是移动端最基础最常见的功能。下面就用vant-ui来实现在三个功能。

首先，你需要安装好了vant，做好了相关配置 ，如果没有，请参考vant的官方文档 https://youzan.github.io/vant/#/zh-CN/quickstart

这里使用的自动按需加载的方式 。做好这些之后，你需要引入组件 ，自动按需加载的只是css和js。

import Vue from 'vue' //引入vue

import { Icon, List, PullRefresh } from 'vant' //引入字体图标，列表， 下拉刷新

Vue.use(List);

Vue.use(PullRefresh);

下面的组件的使用和官方文档中也是一样的

v-model="loading"

:finished="finished"

finished-text="没有更多了"

@load="onLoad"

>

。。。 //列表内容，需要加载和刷新的部分

v-for="item in list"

:key="item"

:title="item"

/>

export default {

data()