mescroll-uni实现下拉刷新和上拉加载

绝地灬酷狼 2023-10-11 12:38 15阅读 0赞

**mescroll-uni**  
mescroll-uni 是 uni-app 下拉刷新和上拉加载的组件，[下载案例][Link 1]后，放到项目里  
![在这里插入图片描述][20190923171011792.png]  
代码：

<mescroll-uni top="130" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"  class="message">
    	...
    	...
    	...
    </mescroll-uni>
    
    
    <script>
    // 导入MescrollUni.vue
    import MescrollUni from '../../../../../plugins/mescroll-uni/mescroll-uni.vue'
    import {getMyTaskList} from '../../../../../api/equip.js'   // 请求数据的接口
    
    export default {
    		components:{
    		    MescrollUni
    		},
    		created() {
    			this.getMyTaskList(true) 
    		},
    		data() {
    			return {
    			    list: [],
    				pageParams: {
    					start: 0,   //后台分页需要传的数据
    					length: 10, //后台分页需要传的数据
    					fetchType: 'today'
    				},
    			}
    		}
    		methods: {
    		     async getMyTaskList (refresh = false) {
    					if (refresh) {
    						// 如果是刷新
    						console.log('刷新')
    						this.pageParams.start = 0
    						this.list = []   //刷新的话，清空之前的数据，不请空的话，下拉刷新，会出现重复数据
    					} else {
    						// 否则就是获取更多，
    						console.log('加载')
    						this.pageParams.start = this.pageParams.start + this.pageParams.length
    					}
    					let res = await getMyTaskList(this.pageParams)
    					//  获取最新的数据 || 把未显示的数据加到后面
    					this.list = this.list.concat(res.object.resultList) 
    					console.log(this.list)
    					return res.object.resultList
    				},
    				downCallback(mescroll){
    				   // 下拉刷新时，再次请求数据
    					this.getMyTaskList(true)
    					mescroll.endErr()
    					
    				},
    				async upCallback(mescroll){
    					let list = await this.getMyTaskList()
    					if (list.length < this.pageParams.length) {
    						// 如果查出来的是0条，或者查出来的条目小于分页条数，则没有更多数据了
    						mescroll.endUpScroll(true)
    					} else {
    						mescroll.endUpScroll(false)
    					}
    				}
    	}
    }
    </script>

[Link 1]: http://www.mescroll.com/load.html?v=19072
[20190923171011792.png]: https://img-blog.csdnimg.cn/20190923171011792.png