vue.js整合vux中的上拉加载下拉刷新实例教程

2019-11-19 14:33:39

字体：大中小

来源：转载

供稿：网友

前言

Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库，开发初衷是满足公司的微信端表单需求，因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已)。于是用 vue 重构了表单组件，后来一发不可收拾把其他常用组件也一并开发了。

相比于 React 还是更喜欢用 Vue ，除了目前社区组件不多，周边构建工具还是比较完善的(作者也特别勤奋)。

下面话不多说了，来一看看详细的介绍吧。

先上图

创建项目

使用vue-cli 创建一个vue项目

安装vux，可以参考：vux快速入门

配置

官方文档地址

打开后会看到一段话

该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。建议使用第三方相关组件，相关 issue 将不会处理。

不知道作者为啥不维护了，明明需求挺多的

我没有用demo里的 LoadMore 组件，用的是 Scroller里自带的 use-pullup, use-pulldown 下面是我的配置

<!--  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生成的数据，可以看一下这篇文章：使用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部分补全

<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>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对武林网的支持。

上一篇：webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

下一篇：Gulp实现静态网页模块化的方法详解