Vue集成Vux实现上拉加载与下拉刷新完整教程

作者：山岚时间：2026-10-22 11:44:07浏览：375

本文介绍如何在Vue项目中集成Vux库，利用Scroller组件的use-pullup和use-pulldown属性实现列表的上拉加载更多与下拉刷新功能。通过配置axios获取Mock数据，并处理refresh和loadMore回调，完成移动端常见的滚动交互逻辑。

Vue集成Vux实现上拉加载与下拉刷新完整教程

前言

Vux 是一个基于 Vue 和 WeUI 构建的移动端 UI 组件库。其开发初衷是为了解决公司内部微信端表单在移动设备上的显示效果问题，因为当时现有的第三方问卷系统在手机上体验不佳，仅是 PC 样式的简单缩放适配。因此，作者使用 Vue 重构了表单组件，随后又陆续开发了其他常用组件。

相较于 React，笔者更倾向于使用 Vue。尽管目前 Vue 社区的组件数量相对较少，但其周边构建工具链已经相当完善，且作者团队保持着较高的更新频率。

接下来直接介绍具体实现步骤。

先展示最终效果截图

Vue集成Vux实现上拉加载与下拉刷新完整教程

项目初始化与Vux安装

创建项目

首先，使用 vue-cli 脚手架工具初始化一个 Vue 项目。

接着安装 vux 库，具体安装步骤可参考 vux 快速入门文档。

配置

访问 vux 官方文档地址。

进入文档页面后，首先会看到一段提示信息。

官方指出该组件已停止维护，不建议在新项目中使用，大多数场景下无需依赖此组件，相关 Issue 将不再处理。

尽管官方建议弃用，但考虑到实际业务需求依然旺盛，此处仍演示其用法。

本文未使用 demo 中的 LoadMore 组件，而是采用 Scroller 组件内置的 use-pullup（上拉）和 use-pulldown（下拉）功能。以下是具体配置代码。

Scroller组件配置与数据请求


<!-- 
 height: 我用到x-header了，文档里说header高是48px,所以这里设置成-48
 -->
<scroller use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
  use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh"
  lock-x ref="scrollerBottom" height="-48">
</scroller>
<script>
 import {Scroller, XHeader} from 'vux'
 const pulldownDefaultConfig = {
 content: '下拉刷新',
 height: 40,
 autoRefresh: false,
 downContent: '下拉刷新',
 upContent: '释放后刷新',
 loadingContent: '正在刷新...',
 clsPrefix: 'xs-plugin-pulldown-'
 }
 const pullupDefaultConfig = {
 content: '上拉加载更多',
 pullUpHeight: 60,
 height: 40,
 autoRefresh: false,
 downContent: '释放后加载',
 upContent: '上拉加载更多',
 loadingContent: '加载中...',
 clsPrefix: 'xs-plugin-pullup-'
 }
 export default {
 components: {
 XHeader,
 Scroller
 },
 mounted() {
 this.$nextTick(() => {
 this.$refs.scrollerBottom.reset({top: 0})
 })
 },
 data() {
 return {
 list: [],
 pullupDefaultConfig: pullupDefaultConfig,
 pulldownDefaultConfig: pulldownDefaultConfig
 }
 },
 methods: {
 refresh() { 
 },
 loadMore() {
 
 }
 }
 }
</script>

请求接口遍历数据

接口服务采用 mock.js 生成的模拟数据，关于如何生成随机数据及使用 Express 输出 JSON 接口，可参考相关文章。

安装 axios 用于网络请求。


yarn add axios


//...
 methods: {
 fetchData(cb) {
  axios.get('http://localhost:3000/').then(response => {
  this.$nextTick(() => {
   this.$refs.scrollerBottom.reset()
  })
  cb(response.data)
  })
 }
 }
//...

刷新与加载更多逻辑实现

完善 refresh（刷新）和 loadMore（加载更多）方法逻辑。


//...
 methods: {
 refresh() {
  this.fetchData(data => {
  this.list = data.list
  this.$refs.scrollerBottom.enablePullup()
  this.$refs.scrollerBottom.donePulldown()
  })
 },
 loadMore() {
  this.fetchData(data => {
  if (this.list.length >= 10) {
   this.$refs.scrollerBottom.disablePullup()
  }
  this.list = this.list.concat(data.list)
  this.$refs.scrollerBottom.donePullup()
  })
 }
 }
//...

在组件挂载加载时，主动调用一次 loadMore 方法以获取初始数据。


//...
 mounted() {
 this.$nextTick(() => {
  this.$refs.scrollerBottom.reset({top: 0})
 })
 this.loadMore()
 }
//...

HTML模板与完整代码结构

最后补充完整的 HTML 模板部分。


<scroller>
 <div style="padding: 10px 0">
 <div class="box" v-for="(item, index) in list" :key="index">
  <p class="list"></p>
 </div>
 </div>
</scroller>

完整代码


<template>
 <div>
 <x-header :left-options="{'showBack': false}">上拉加载，下拉刷新</x-header>
 <scroller use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
    use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh"
    lock-x ref="scrollerBottom" height="-48">
  <div style="padding: 10px 0">
  <div class="box" v-for="(item, index) in list" :key="index">
   <p class="list"></p>
  </div>
  </div>
 </scroller>
 </div>
</template>
<script>
 import {Scroller, XHeader} from 'vux'
 import axios from 'axios'

 const pulldownDefaultConfig = {
 content: '下拉刷新',
 height: 40,
 autoRefresh: false,
 downContent: '下拉刷新',
 upContent: '释放后刷新',
 loadingContent: '正在刷新...',
 clsPrefix: 'xs-plugin-pulldown-'
 }
 const pullupDefaultConfig = {
 content: '上拉加载更多',
 pullUpHeight: 60,
 height: 40,
 autoRefresh: false,
 downContent: '释放后加载',
 upContent: '上拉加载更多',
 loadingContent: '加载中...',
 clsPrefix: 'xs-plugin-pullup-'
 }
 export default {
 components: {
  XHeader,
  Scroller
 },
 mounted() {
  this.$nextTick(() => {
  this.$refs.scrollerBottom.reset({top: 0})
  })
  this.loadMore()
 },
 data() {
  return {
  list: [],
  pullupDefaultConfig: pullupDefaultConfig,
  pulldownDefaultConfig: pulldownDefaultConfig
  }
 },
 methods: {
  fetchData(cb) {
  axios.get('http://localhost:3000/').then(response => {
   this.$nextTick(() => {
   this.$refs.scrollerBottom.reset()
   })
   cb(response.data)
  })
  },
  refresh() {
  this.fetchData(data => {
   this.list = data.list
   this.$refs.scrollerBottom.enablePullup()
   this.$refs.scrollerBottom.donePulldown()
  })
  },
  loadMore() {
  this.fetchData(data => {
   if (this.list.length >= 10) {
   this.$refs.scrollerBottom.disablePullup()
   }
   this.list = this.list.concat(data.list)
   this.$refs.scrollerBottom.donePullup()
  })
  }
 }
 }
</script>
<style lang="less">
 .box {
 padding: 5px 10px 5px 10px;
 &:first-child {
  padding: 0 10px 5px 10px;
 }
 &:last-child {
  padding: 5px 10px 0 10px;
 }
 }
 .list {
 background-color: #fff;
 border-radius: 4px;
 border: 1px solid #f0f0f0;
 padding: 30px;
 }
 .xs-plugin-pulldown-container {
 line-height: 40px;
 }
 .xs-plugin-pullup-container {
 line-height: 40px;
 }
</style>

总结

以上就是本文的全部内容，希望这些内容能为大家的学习或工作提供参考。如有任何疑问，欢迎留言交流，感谢支持。

作者最新文章

Vue.js官网地址是多少？区分国际站与中文文档入口

2026-11-05 16:29:53

Vue/React 项目中怎么封装复用 flv.js 播放器组件

2026-11-03 19:42:36

Vue.js 动态路由权限控制与菜单生成实战方案

2026-11-03 13:46:47

Vue.js 企业级项目架构搭建与目录规范实战

2026-11-03 12:25:32

Vue 或 React 项目中集成 Swiper.js 的最佳实践