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

绝地灬酷狼 2021-11-09 14:04 2424阅读 0赞

页面布局：

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

<view class="n\_indent" v-for="(item,index) in items" :key="index">  
            <view class="head\_time">  
                <text>\{ \{item.list.time\}\}</text>  
            </view>  
            <view class="n\_content">  
                <view class="n\_h1">  
                    <text>\{ \{item.list.delivery\}\}</text>  
                </view>  
                <view class="n\_p">  
                    <text>你在 \[\{ \{item.list.text\}\}\] 下的订单已送达出。（点击查看详情） </text>  
                </view>  
            </view>  
        </view>  
        <view class="loading\_text">  
            <text>\{ \{loadingText\}\}</text>  
        </view>  
    </scroll-view>  
</template>

<script>
    	import wsLoadMore from '@/components/wsure-load-more/load-more.vue';
     
    	export default {
    		components:{
    			wsLoadMore
    		},
    		data() {
    			return {
    				pre:'item',
    				failFlag:false,
    				count:0,
    				items:[
    					{
    						id:1,
    						list:{
    							time:'11:21',
    							delivery:'您的商品已送出',
    							text:'杨铭宇黄焖鸡米饭（广埠屯店）'
    						}
    					},
    					{
    						id:2,
    						list:{
    							time:'10:56',
    							delivery:'您的订单已接单',
    							text:'杨铭宇黄焖鸡米饭（广埠屯店）'
    						}
    					},
    					{
    						id:3,
    						list:{
    							time:'昨天11:44',
    							delivery:'您的订单已送达',
    							text:'杨铭宇黄焖鸡米饭（广埠屯店）'
    						}
    					},
    					{
    						id:4,
    						list:{
    							time:'昨天11:17',
    							delivery:'您的商品已送出',
    							text:'老韩煸鸡（武大店）'
    						}
    					},
    					{
    						id:5,
    						list:{
    							time:'昨天11:00',
    							delivery:'您的商品已接单',
    							text:'杨铭宇饭（街道口店）'
    						}
    					},
    					{
    						id:6,
    						list:{
    							time:'11:21',
    							delivery:'您的商品已送出',
    							text:'杨铭宇黄焖鸡米饭（广埠屯店）'
    						}
    					},
    					{
    						id:7,
    						list:{
    							time:'10:56',
    							delivery:'您的订单已接单',
    							text:'杨铭宇黄焖鸡米饭（广埠屯店）'
    						}
    					},
    					{
    						id:8,
    						list:{
    							time:'昨天11:44',
    							delivery:'您的订单已送达',
    							text:'杨铭宇黄焖鸡米饭（广埠屯店）'
    						}
    					},
    					{
    						id:9,
    						list:{
    							time:'昨天11:17',
    							delivery:'您的商品已送出',
    							text:'老韩煸鸡（武大店）'
    						}
    					},
    					{
    						id:10,
    						list:{
    							time:'昨天11:00',
    							delivery:'您的商品已接单',
    							text:'杨铭宇饭（街道口店）'
    						}
    					}
    				],
    				loadingText:'正在加载...'
    			}
    		},
    		onLoad:function(option){
    			// // 进入页面 加载数据
    			// setTimeout(function(){
    			// 	console.log('刷新成功')
    			// },2000);
    			// uni.startPullDownRefresh({
    			// 	success:function(red) {
    			// 		console.log(red);
    			// 	}
    			// })
    		},
    		
    		// 下拉刷新
    		onPullDownRefresh(){
    			console.log('刷新中');
    			setTimeout(function(){
    				uni.stopPullDownRefresh();
    				console.log("OK了")
    			},2000)
    		},
    		
    		// 上拉加载
    		onReachBottom(){
    			// 自己模拟数据  后期开发ajax请求数据
    			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);
    			}
    		},
    		
    		methods:{
    			
    		}
    	}
    </script>

<style lang="scss">
    	page{background-color: #f6f5f5; }
    	
    	.content {
    		.n_indent {
    			margin-top: 30upx;
    			&:first-child {
    				margin-top: 0;
    			}
    			.head_time {
    				color: #969696;
    				display: flex;
    				justify-content: center;
    				padding: 30upx 0;
    				font-size: 20upx;
    			}
    			.n_content {
    				background-color: #fff;
    				padding: 34upx 63upx 34upx 34upx;
    				font-size: 34upx;
    				.n_h1 {
    					margin-bottom: 20upx;
    					font-weight: 700;
    				}
    				.n_p {
    					color: #969696;
    					font-size: 20upx;
    				}
    			}
    			
    		}
    		.loading_text {
    			display: flex;
    			justify-content: center;
    			font-size: 20upx;
    			margin: 48upx 0 30upx;
    			color: #979797;
    		}
    	}
    </style>

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

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

引入到自己的项目下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70][]

![20190801160811201.png][]

引入     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);
    			}
    		},

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70]: /images/20211109/b00fd5f05e804512bec16bfc8017d6bc.png
[20190801160811201.png]: /images/20211109/a8a664a947a047bb97be68e427dd0933.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2424人围观）

还没有评论，来说两句吧...

相关阅读

相关上拉加载下拉刷新

老方法，先上效果图： ![1264306-20190925171702811-981213350.gif][] 1.加入下拉刷新上拉加载的依赖 1 //下拉刷新

一时失言乱红尘/ 2023年08月17日 17:09/ 0 赞/ 175 阅读

相关 Android实现下拉刷新,上拉加载

首先，要导入两个依赖（很重要！！！！） App——>build gradle——>Sync Now(右上角) implementation 'com.scwang

川长思鸟来/ 2023年06月13日 06:15/ 0 赞/ 44 阅读

相关原生js,实现上拉加载--下拉刷新

//------- -------上拉加载更多--------------- //获取滚动条当前的位置

骑猪看日落/ 2023年05月31日 07:21/ 0 赞/ 67 阅读

相关 uniapp实现上拉加载和下拉刷新

下拉刷新`onPullDownRefresh` > 需要先在pages.json中开启下拉刷新 //在pages.json中找到需要开启的页面. 在style中

本是古典何须时尚/ 2023年03月06日 03:53/ 0 赞/ 61 阅读

相关下拉刷新上拉加载

下拉刷新： ![Center][] ![Center 1][] ![Center 2][] 上划加载 ![Center 3][] ![C

约定不等于承诺〃/ 2022年07月17日 02:22/ 0 赞/ 384 阅读

相关 mescroll.js实现下拉刷新，上拉加载！！

一：下载并引用 <link rel="stylesheet" href="assets/css/mescroll.min.css"> <script type="te

拼搏现实的明天。/ 2022年06月04日 01:13/ 0 赞/ 331 阅读

相关 RecyclerView 上拉加载下拉刷新

RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout and

以你之姓@/ 2022年01月07日 12:13/ 0 赞/ 406 阅读

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

页面布局： <template> <scroll-view scroll-y="true" class="content"> <!-- 遍历自己自定义的

绝地灬酷狼/ 2021年11月09日 14:04/ 0 赞/ 2425 阅读

相关 mui上拉刷新下拉加载

废话不多说，直接上代码 1、容器  <div id="refreshContainer" class="mui-content m

Dear 丶/ 2021年09月15日 16:48/ 0 赞/ 487 阅读

相关 uniapp下拉刷新上拉加载

一、需求留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据二、代码 ![在这里插入图片描述][watermark_t

﹏ヽ暗。殇╰゛Y/ 2021年09月03日 04:51/ 0 赞/ 754 阅读