Vue新技能get！轻松实现下拉刷新，上拉加载更简单

现在手机上网真的太方便了，各种软件都有下拉刷新和上拉加载网页功能，用着舒心还飞快！其实只要装几个小插件或者简单敲几段代码就行，这么厉害的Vue工具你得了解一下！别犹豫了，赶紧跟我们学起来，肯定能学到不少新知识～

下拉刷新的实现

下拉刷新的意思就是下滑网页，这样能更快地更新数据。真的超好用，特别是跟Vue的另一个工具vue-pull-to搭配使用时。感觉用起来比吃饭喝水还容易，简直太顺手了。这可是大牛Matt Maribojoc在Vue.js峰会上提出的绝佳创意呀。用了它，你的APP就能轻松实现下拉刷新的效果。

首先嘞，你得安装个vue-pull-to的插件到项目里头去哈。紧接着，就是把插件用在你想做到下拉刷新的那个部分，就跟平时组战队联网打游戏似的，so easy。在模板中添加个<pull-to>标签就行了，搞定！当你往下拖拽页面的时候，插件会抓住那个更新机会，然后自动帮你更新页面内容。最后，利用refresh回调函数和服务器唠两句嗑，把最新信息给带回来，这样咱们的页面就可以永葆青春，时刻新鲜咯~

npm install vue-pull-to --save

上拉加载的实现

  

    
      
{{ item }}
    
  


  import PullTo from 'vue-pull-to'
  export default {
    components: {
      PullTo
    },
    data() {
      return {
        list: [], // 下拉刷新的数据
        disabled: false, // 是否禁用下拉刷新
      }
    },
    methods: {
      // 下拉刷新回调事件
      refresh() {
        // 发送请求，获取最新数据
        axios.get('/getList').then(res => {
          this.list = res.data
        })
      }
    }
  }

看网页最后一页时还能自动载入更多内容这个Vue插件vue-infinite-loading就能搞定。用上它以后再也不怕长长的列表烦人，滑屏起来也顺畅得多！

首先，得装个叫vue-infinite-loading的小插件。然后在需要上拉功能的地方，跟Vue一样来注册用法。盯着on-infinite这玩意儿看看是不是能察觉到人家滑动下滑的动作。然后在回调函数里，让服务器搜下一页的内容，收到后直接塞到列表里面，最后刷新一下网页就完事了！

你知道 vue-infinite-loading多牛吗？功能多得数都数不过来！就说那个iSpacing属性，随心所欲调节加载区域太给力了；还有那个Spinner属性，加载动画瞬间提升颜值；最妙的还是No-results插槽，无结果的时候，还有贴心小提醒！

总结与展望

你们是不是每天都盯着手机不放啊?其实我们的Vue框架里好多好用的插件和API可以让你们的应用或网站更好看!来告诉你们如何利用Vue搞定下拉刷新、上拉加载这些功能。看完这个之后也许你也能搞出点儿新鲜玩意儿呢!

npm install vue-infinite-loading --save

噢耶！以后手机上网速度飞快！相信会有很多超级好用的工具帮咱们提高效率哒！但是别忘了保持潮人风范，努力学习新的技巧，增强专业素养，让使用我们软件的朋友们享受更好的体验喽！

希望本文对您有所帮助，请多多支持！

  

    

      {{ item }}
    
    
      
没有更多了
    
  


  import InfiniteLoading from 'vue-infinite-loading'
  export default {
    components: {
      InfiniteLoading
    },
    data() {
      return {
        list: [], // 上拉加载的数据
        page: 1, // 当前页码
        size: 10, // 每页数量
        isLoading: false, // 是否正在加载中
      }
    },
    methods: {
      // 上拉加载回调事件
      onInfinite() {
        if (this.isLoading) return
        this.isLoading = true
        axios.get('/getList', {page: this.page, size: this.size}).then(res => {
          this.list = this.list.concat(res.data)
          this.page++
          this.isLoading = false
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
        })
      }
    }
  }

。