一、在vue中使用vant组件库有个van-pull-refresh
下拉组件,配合van-list
列表组件实现页面的下拉刷新和上拉加载,原理简单,适用场景在列表页面内容展示。
-
引入组件: List 列表、PullRefresh 下拉刷新(当然在vue-cli下的main.js全局引入vant的可以直接页面调用,无需单独引入)
import { PullRefresh , List } from 'vant' export default { components: { PullRefresh, List } } 复制代码
-
html片段引用组件:
<template> <div> <van-pull-refresh v-model="refreshing" @refresh="onrefresh"> <van-list v-model="loading" :finished="finished" // 是否已加载完成,加载完成后不再触发load事件 :offset="10" // 滚动条与底部距离小于offset时触发load事件 :immediate-check="flase" // 是否在初始化时立即执行滚动位置检查 finish-text="没有更多了" @load="onLoad" // 滚动条与底部距离小于offset时触发onLoad() > <div> <ul v-for="(item,index) in list" :key="index"> <li>{{ item.content }}</li> </ul> </div> </van-list> </van-pull-refresh> </div> </template> 复制代码
-
在data中定义参数需要有:
data() { return { list: [], // 请求的列表 loading: false, finished: false, // 是否已加载完成,加载完成后不再触发load事件 refreshing: false, // 下拉状态 listQuery: { page: 1, // 当前页码数 limit: 10, // 一页显示10条 } }; }, 复制代码
-
javascript逻辑代码,用到了forEach()方法调用数组的每个元素,并将元素传递给回调函数。
mounted() { this.getList(); }, methods: { // 上拉加载 onLoad() { setTimeout(() => { this.getlist(); }, 1000); }, // 获取列表 getList() { // 请求得到会议列表,并传参传递请求页码和单页列表数量limit getList(this.listQuery).then((res) => { // 如果是第一次进入页面page==1 直接赋值 if (this.listQuery.page === 1) { this.list = res.data.data } else { // 如果不是则在后面追加数据,forEach()方法 res.data.data.forEach(item => { this.list.push(item) }); // 追加完成后关闭loading this.loading = false } // 当还有数据是page++ if (res.data.data.length > 0) { this.listQuery.page++; this.loading = false } else { // 如果没有数据加载完毕 this.finished = true } }); }, // 下拉刷新 onRefresh() { setTimeout(() => { this.listQuery.page = 1; this.getList(); this.refreshing = false; }, 1000); } }}; 复制代码
以上便是简单的下拉刷新和上拉加载分页,另外page++的if判定根据后端传递的参数更改,如果后端有传递页码数,当然更好比较实现且严谨。