欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-10 10:14:38
前言 vux 是基于 vue 和 weui 开发的手机端页面 ui 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 pc...

前言

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

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

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

先上图

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

创建项目

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

安装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生成的数据,可以看一下这篇文章:

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

总结

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