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

vue-scroller实现vue单页面的上拉加载和下拉刷新问题

程序员文章站 2022-06-29 12:42:39
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件。 vue-scrolle的基本使用方法: 1.下载 2.导包 3.项目使用 4.修改代码 将模板转成你自己想要的效果。 ......

vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件。

vue-scrolle的基本使用方法:

1.下载

 

npm i vue-scroller -d

 

2.导包

import vue from 'vue'
import vuescroller from 'vue-scroller'
vue.use(vuescroller)

3.项目使用

  <scroller :on-infinite="infinite"
            :on-refresh="refresh"
           ref="my_scroller">
       <!-- 项目内容 -->
</scroller>
<script>
  export default {
    methods:{
      infinite(done) {   //上拉加载
        if(this.nodata) {
          settimeout(()=>{
            this.$refs.my_scroller.finishinfinite(2);
          })
          return;
        }
        let self = this;
        let i=1;

        let start = this.list.length;
        settimeout(() => {
          for(var k=0;k<9;k++){
                    self.list.push(k)
          }
          i++;
          if(start/i < 9) {
            self.nodata = "没有更多数据"
          }
          self.$refs.my_scroller.resize();
          done()
        }, 1500)
      },
      refresh:function(){         //下拉刷新
        console.log('refresh')
        this.timeout = settimeout(()=>{
             this.$refs.my_scroller.finishpulltorefresh()
        }, 1500)
      }

    }
  }
</script>                

4.修改代码

  将模板转成你自己想要的效果。