uni-app：scroll-view 实现上拉加载，下拉刷新 （代码笔记）

 

页面布局：

<template>
    scroll-y="true"  class="content">

        items" :key="index">
            
                {{item.list.time}}
            
            
                
                    {{item.list.delivery}}
                
                
                    你在 [{{item.list.text}}] 下的订单已送达出。（点击查看详情）
                
            
        
        
            {{loadingText}}
        
    
template>

 

首先第一步： 需要下载 下拉加载  的组件   import wsLoadMore from '@/components/wsure-load-more/load-more.vue'; 

可以在Hbuilder上创建个新uni-app的项目 ，copy一份components 

引入到自己的项目下

引入     import wsLoadMore from '@/components/wsure-load-more/load-more.vue'；

 

components:{
            wsLoadMore
        },

 

    下拉刷新 

// 下拉刷新
		onPullDownRefresh(){
			console.log('刷新中');
			setTimeout(function(){
				uni.stopPullDownRefresh();
				console.log("OK了")
			},2000)
		},

// 上拉加载 

// 自己模拟数据  后期开发ajax请求数据

// 下拉触发事件
		onReachBottom(){
			
			if(this.items.length > 40){
				this.loadingText = '我是有底线的';
				return false;
			}
			var len = this.items.length;
			for(var i =1; i < 10 ; i++){
				var id = this.items[len - 1].id + i ;
				var  p = {
					id: id,
					list:{
						time:'昨天11:00',
						delivery:'您的商品已接单',
						text:'杨铭宇饭（街道口店）'
					}
				}
				this.items.push(p);
			}
		},