vue-vant实现下拉刷新和上拉加载功能(tips)

一、在vue中使用vant组件库有个van-pull-refresh下拉组件,配合van-list列表组件实现页面的下拉刷新和上拉加载,原理简单,适用场景在列表页面内容展示。

  • 引入组件: List 列表、PullRefresh 下拉刷新(当然在vue-cli下的main.js全局引入vant的可以直接页面调用,无需单独引入)

    import { PullRefresh , List } from 'vant'
    
    export default {
            components: {
                     PullRefresh,
                     List
        }
    }
    复制代码
  • html片段引用组件:

    <template>
        <div>
            <van-pull-refresh v-model="refreshing" @refresh="onrefresh">
                <van-list
                    v-model="loading"
                    :finished="finished" // 是否已加载完成,加载完成后不再触发load事件
                    :offset="10" // 滚动条与底部距离小于offset时触发load事件
                    :immediate-check="flase" // 是否在初始化时立即执行滚动位置检查
                    finish-text="没有更多了"
                    @load="onLoad" // 滚动条与底部距离小于offset时触发onLoad()
                >
                    <div>
                        <ul v-for="(item,index) in list" :key="index">
                            <li>{{ item.content }}</li>
                        </ul>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </template>
    复制代码
  • 在data中定义参数需要有:

    data() {    
      return {      
         list: [], // 请求的列表      
         loading: false,      
         finished: false, // 是否已加载完成,加载完成后不再触发load事件      
         refreshing: false, // 下拉状态      
         listQuery: {        
           page: 1, // 当前页码数        
           limit: 10, // 一页显示10条      
        }    
      };  
    },
    复制代码
  • javascript逻辑代码,用到了forEach()方法调用数组的每个元素,并将元素传递给回调函数。

    mounted() {    
       this.getList();  
    },  
    methods: {    
       // 上拉加载    
       onLoad() {      
         setTimeout(() => {        
             this.getlist();      
       }, 1000);    
    },   
    // 获取列表    
    getList() {      
        // 请求得到会议列表,并传参传递请求页码和单页列表数量limit      
        getList(this.listQuery).then((res) => {        
            // 如果是第一次进入页面page==1 直接赋值        
            if (this.listQuery.page === 1) {          
                this.list = res.data.data        
            } else {          
            // 如果不是则在后面追加数据,forEach()方法         
             res.data.data.forEach(item => {            
                    this.list.push(item)          
             });          
            // 追加完成后关闭loading          
                this.loading = false        
         }        
    // 当还有数据是page++        
        if (res.data.data.length > 0) {          
            this.listQuery.page++;          
            this.loading = false        
        } else {          
            // 如果没有数据加载完毕          
            this.finished = true        
        }      
      });    
    },    
    // 下拉刷新    
    onRefresh() {      
        setTimeout(() => {        
            this.listQuery.page = 1;        
            this.getList();        
            this.refreshing = false;      
         }, 1000);    
       }  
    }};
    复制代码

以上便是简单的下拉刷新和上拉加载分页,另外page++的if判定根据后端传递的参数更改,如果后端有传递页码数,当然更好比较实现且严谨。

分类:
前端
标签: