井井客

搜索

vue2下拉刷新实例

相比上次在vue1时用watch做的下拉刷新,这次在改版用vue2做下拉刷新,感觉比一次更规范了,不过并没有继续用watch,而是直接用window监听滚动事件。

vue2下拉刷新实例

我自己的项目页面代码如下:

<template>
 <div class="userBorrow">
  <borrowTitle :idx='0'></borrowTitle>
  <borrowList v-if='hasBorrow' :items='list'></borrowList>
  <pageError v-if='!hasBorrow' :msg='borrowMsg' :class='borrowCls'></pageError>
  <noMore v-if='!hasMore'></noMore>
  <transition name="scale">
   <dialogPopup :class='diglogClass' :msg='diglogCont' v-show='diglogShow'></dialogPopup>
  </transition>
 </div>
</template>
<script>
 export default {
     data () {
         return {
             hasBorrow:true,    //开关-借款列表
             hasMore:true,    //开关-提示-->没有更多
             diglogShow:false,   //开关-显示diglog组件
             borrowMsg:'没有任何借款记录',
             borrowCls:'error-txt',
             list:[],        //数据列表
             pageHeight:document.body.clientHeight, //页面一屏的高度
             hasNext:false,       //是否有下一页
             currentPage:1       //页码
         }
     },
     methods:{
      handleScroll(){
       console.log('监听一次了');
       //获取滚动条高度及页面总长度
       var scrollTop = document.body.scrollTop;
       var allHeight = document.body.scrollHeight;
       //如果滚动高度=页面总长-页面一屏的高度(即--滚动条到了底部)
       if(scrollTop == allHeight - this.pageHeight){
        //如果还有下一页,则传递页码发送ajax,否则显示更多
        if(this.hasNext == true) this.sendAjax(this.currentPage);
        else{
         this.hasMore = false;
         window.removeEventListener('scroll',this.handleScroll);
        }
       }
      },
      sendAjax(thisPage){
       //组织ajax数据
    var sendData = {
     'appId':this.appInfo.appId,
     'statusType':'1',
     'page_size':'8',
     'target_page':String(thisPage)
    }
    //发送ajax[加密]
    this.$http.post(this.domain+'order/list.json',this.secretJS.reData(sendData,this.appInfo.secret)).then(
     (response) => {
      //解密数据
      var rs = JSON.parse(this.secretJS.backSecret(response.body,this.appInfo.secret));
      //如果返回值成功
      if(rs.success == true){
       //判断data结果条数是否存在,[不存在则不展示列表]
       if(rs.totalSize === undefined){
        this.hasBorrow = false;
       }else{
        //如果结果存在
        this.hasNext = rs.hasNext;    //获取是否拥有下一页
        if(this.hasNext) this.currentPage++; //如果有下一页则当前页码+1
        //列表填充数据
        for(var i =0; i < rs.data.length; i++){
         this.list.push(rs.data[i])
        }
        //监听滚动条
        window.addEventListener('scroll',this.handleScroll);
       }
      }else{
       //否则抛出错误[如登录过期错误等]
       this.callDialog(rs.errorMsg,'text');
       //重新去登录
       setTimeout(()=>{
        this.$router.push('/login');
       },1500);
      }
     }
    )
      }
     },
     mounted:function(){
      //打开页面即发送ajax
      this.sendAjax(this.currentPage);
     },
     beforeDestroy:function(){
      //解除监听滚动条操作
      window.removeEventListener('scroll',this.handleScroll);
     }
 }
</script>

具体的思路如下:
(1)打开页面的时候先发送ajax,其中有一个关键就是需要传入页码(默认为1),作为发送数据时的一个参数值。
(2)成功获取到数据且数据不为0时,先查看是否有下一页,如要有的话就将页码++,并且数据放入列表中
(3)然后开始监听滚动条,当发现滚动条到达底部,就继续发送ajax,这时页面已经经过++后变为了2(后面会继续++)
(4)而如果没有下一页的话,就会提示没有更多了。

效果图如下:

vue2下拉刷新实例效果图

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:vue2下拉刷新实例
本文链接:/c/24256.html

上一篇:五分钟进入browsersync的世界
下一篇:JS+canvas生成验证码

文章分类

相关阅读

随便看看