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); 下面的组件的使用和官方文档中也是一样的
。。。 //列表内容，需要加载和刷新的部分
export default {
data() {
return {
flag_scroll: false,
loading: false,
finished: false,
isLoading: false,
page:1,
};
},
methods: {
//上拉加载
//异步请求数据 ，我们的项目时封装好的方法，此处只是调用
onLoad(code){
let body = {}
body.page = this.page
body.lifecycleStatus = code //传递的参数
this.getMaintenanceMoreList({
body,
failure: (resData) => {
},
//上面的这些都不需要理会，只要记得在数据请求成功的回调里做以下操作：
success: (resData) => {
this.loading = false; //数据请成功后
this.page++ //页码要增加1
if(resData.data.rows.length == 0){//如果返回数据为空，则显示没有数据了。。。
this.finished = true;
}
}
})
},
}需要注意的点：
- 请求成功后
this.loading = false- 页码自增
this.page++- 判断是否还有数据，如果已经全部请求出来了，
this.finished = true- 拼接数组 state.MAIMTENANCE_LIST = [... state.MAIMTENANCE_LIST, ...resData.data.rows]
因为项目中用的状态管理器，所以数据的处理是在store里进行操作的，只需要讲请求回的列表的数据进行拼接即可state.MAIMTENANCE_LIST = [... state.MAIMTENANCE_LIST, ...resData.data.rows]
下拉刷新：
onRefresh() {
this.finished = false;
this.page = 1
this.getList()//正常的请求数据的方法，数组重新赋值
},
//列表请求会在多处使用，所以放在了一个方法里
getList () {
let body = {}
body.page = this.page
this.getMaintenanceList({
body,
failure: (resData) => {
},
success: (resData) => {
this.isLoading = false;
this.page++
}
})
}注意事项：
- this.finished = false; 上拉加载完数据之后 this.finished = false，如果不设置为false，下拉刷新之后上拉加载将不会执行
- this.page = 1 上拉加载时this.page的值已经发生变化，下拉刷新之后页面显示的首屏的数据 ，上拉时要重新加载分页。
- this.isLoading = false; this.isLoading = true的情况下数据请求成功但是不会继续往下执行，为false之后才会继续执行
- this.page++ 是为了上拉加载做准备，首屏已经加载，继续上拉需要加载的是第二页的内容
返回顶部是最容易实现的了，请看：
//在methods里定义方法
backTop(){
document.getElementsByClassName('equi_container')[0].scrollTop = 0
},这就可以啦。。。点击按钮，让滚动条高度为0.
注意：是给滚动的父元素设置，也就是设置了
overflow：auto的元素
如果不想让按钮在一开始的时候存在，而是在滚动了一定的距离的时候再出现，那设置 一个滚动条的监听就搞定啦，
mounted() {
window.addEventListener('scroll', this.handleScroll, true)
},
//methods中定义事件
handleScroll(env){
let scrollTop = document.getElementsByClassName('equi_container')[0].scrollTop
if(scrollTop > 100){
this.flag_scroll = true
}else {
this.flag_scroll = false
}
},前提是，你要在data中定义属性flag_scroll，并设置按钮的v-if或者v-show，建议使用v-show
注意：按钮要设置固定定位，按钮最好设置边框，会好看。
写的有点乱，望大神指点，希望能给予需要的人一点点的帮助，有不明白的欢迎留言，谢谢！