经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTMLCSS » HTML5 » 查看文章
vue-scroller实现vue单页面的上拉加载和下拉刷新问题
来源:cnblogs  作者:海盗的小秘密  时间:2018/9/25 20:05:29  对本文有异议

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

vue-scrolle的基本使用方法:

1.下载

 

  1. npm i vue-scroller -D

 

2.导包

  1. import Vue from 'vue'
  2. import VueScroller from 'vue-scroller'
  3. Vue.use(VueScroller)

3.项目使用

  1. <scroller :on-infinite="infinite"
  2. :on-refresh="refresh"
  3.    ref="my_scroller">
  4. <!-- 项目内容 -->
  5. </scroller>
  6. <script>
  7.   export default {
  8.     methods:{
  9.       infinite(done) { //上拉加载
  10.         if(this.noData) {
  11.           setTimeout(()=>{
  12.             this.$refs.my_scroller.finishInfinite(2);
  13.           })
  14.           return;
  15.         }
  16.         let self = this;
  17.         let i=1;
  18.  
  19.         let start = this.list.length;
  20.         setTimeout(() => {
  21.           for(var k=0;k<9;k++){
  22. self.list.push(k)
  23.           }
  24.           i++;
  25.           if(start/i < 9) {
  26.             self.noData = "没有更多数据"
  27.           }
  28.           self.$refs.my_scroller.resize();
  29.           done()
  30.         }, 1500)
  31.       },
  32.       refresh:function(){ //下拉刷新
  33.         console.log('refresh')
  34.         this.timeout = setTimeout(()=>{
  35.          this.$refs.my_scroller.finishPullToRefresh()
  36.         }, 1500)
  37.       }
  38.  
  39.     }
  40.   }
  41. </script>

4.修改代码

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

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号