（4）uniapp上拉加载（onPageScroll和onReachBottom两种实现方式）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了（4）uniapp上拉加载（onPageScroll和onReachBottom两种实现方式）相关的知识，希望对你有一定的参考价值。
参考技术A 公共部分:1.定义一个初始页数，和this的指向变量_self
2.data中定义初始值
3.页面结构：数据渲染后，在盒子末尾加一个view，来放加载提示文字
4.请求数据： onload生命周期里先调用一次，让他在页面显示
5.第一次请求接口
一、onPageScroll实现方式
二、onReachBottom实现方式
uniapp实现上拉加载更多及下拉刷新（假数据版）
首先在项目中跟pages同级创建一个components文件夹，在文件夹中新建一个refrtch.vue文件，将官方代码复制进去
refrtch.vue 完整文件如下：
<template>
<view class="uni-load-more">
<view v-show="status === 'loading' && showIcon" class="uni-load-more__img">
<view class="load1">
<view :style="background:color" />
<view :style="background:color" />
<view :style="background:color" />
<view :style="background:color" />
</view>
<view class="load2">
<view :style="background:color" />
<view :style="background:color" />
<view :style="background:color" />
<view :style="background:color" />
</view>
<view class="load3">
<view :style="background:color" />
<view :style="background:color" />
<view :style="background:color" />
<view :style="background:color" />
</view>
</view>
<text :style="color:color" class="uni-load-more__text"> status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore) </text>
</view>
</template>
<script>
export default
name: 'UniLoadMore',
props:
status:
// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
type: String,
default: 'more'
,
showIcon:
type: Boolean,
default: true
,
color:
type: String,
default: '#777777'
,
contentText:
type: Object,
default ()
return
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
,
data()
return
</script>
<style>
@charset "UTF-8";
.uni-load-more
display: flex;
flex-direction: row;
height: 80upx;
align-items: center;
justify-content: center
.uni-load-more__text
font-size: 28upx;
color: #999
.uni-load-more__img
height: 24px;
width: 24px;
margin-right: 10px
.uni-load-more__img>view
position: absolute
.uni-load-more__img>view view
width: 6px;
height: 2px;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
background: #999;
position: absolute;
opacity: .2;
transform-origin: 50%;
animation: load 1.56s ease infinite
.uni-load-more__img>view view:nth-child(1)
transform: rotate(90deg);
top: 2px;
left: 9px
.uni-load-more__img>view view:nth-child(2)
transform: rotate(180deg);
top: 11px;
right: 0
.uni-load-more__img>view view:nth-child(3)
transform: rotate(270deg);
bottom: 2px;
left: 9px
.uni-load-more__img>view view:nth-child(4)
top: 11px;
left: 0
.load1,
.load2,
.load3
height: 24px;
width: 24px
.load2
transform: rotate(30deg)
.load3
transform: rotate(60deg)
.load1 view:nth-child(1)
animation-delay: 0s
.load2 view:nth-child(1)
animation-delay: .13s
.load3 view:nth-child(1)
animation-delay: .26s
.load1 view:nth-child(2)
animation-delay: .39s
.load2 view:nth-child(2)
animation-delay: .52s
.load3 view:nth-child(2)
animation-delay: .65s
.load1 view:nth-child(3)
animation-delay: .78s
.load2 view:nth-child(3)
animation-delay: .91s
.load3 view:nth-child(3)
animation-delay: 1.04s
.load1 view:nth-child(4)
animation-delay: 1.17s
.load2 view:nth-child(4)
animation-delay: 1.3s
.load3 view:nth-child(4)
animation-delay: 1.43s
@-webkit-keyframes load
0%
opacity: 1
100%
opacity: .2
</style>
在页面中直接使用
内涵注释
完整的使用例子如下：
<template>
<view>
<view>
<block v-for="(item , index) in list_array" :key="index">
<view> item </view>
</block>
</view>
<view>
<uni-load-more :status="status" :content-text="contentText" color="#007aff" />
</view>
</view>
</template>
<script>
import uniLoadMore from '../../components/refetch.vue'
export default
data()
return
//初始数据
list_array: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',
'19',
'20','1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'
],
//加载状态
status: 'more',
//加载状态的不同类型
statusTypes: [
value: 'more',
text: '加载前'
,
value: 'loading',
text: '加载中'
,
value: 'noMore',
text: '没有更多'
],
//触底加载更多的提示文字
contentText:
contentdown: '查看更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
,
//注册组件
components:
uniLoadMore
,
onLoad: function(options)
setTimeout(function()
console.log('start pulldown');
, 1000);
//开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
uni.startPullDownRefresh();
,
// 下拉刷新
onPullDownRefresh()
let _this = this
console.log('下拉刷新后只保留默认显示的几条数据');
setTimeout(function()
//当处理完成刷新数据后，uni.stopPullDownRefresh可以停止当前页面的刷新效果
_this.list_array=['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',
'19',
'20','1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'
],
uni.stopPullDownRefresh();
, 1000);
,
// 上拉加载
onReachBottom()
let _this = this
this.status = 'loading'
//在当前页面显示导航条加载动画。
uni.showNavigationBarLoading()
console.log('加载更多');
setTimeout(function()
for (var i = 0; i < 10; i++)
_this.list_array.push("000" + i)
_this.status = 'more'
//在当前页面隐藏导航条加载动画。
uni.hideNavigationBarLoading()
, 2000);
,
methods:
</script>
<style>
page
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #fff
view
font-size: 28upx;
line-height: inherit
.example
padding: 0 30upx 30upx
.example-title
font-size: 32upx;
line-height: 32upx;
color: #777;
margin: 40upx 25upx;
position: relative
.example .example-title
margin: 40upx 0
.example-body
padding: 0 40upx
uni-radio-group uni-label
padding: 0;
.uni-list-item__container
padding: 24upx 30upx;
width: 100%;
box-sizing: border-box;
flex: 1;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.uni-list-item__container:after
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 30upx;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
</style>
以上是关于（4）uniapp上拉加载（onPageScroll和onReachBottom两种实现方式）的主要内容，如果未能解决你的问题，请参考以下文章
小程序scroll-view实现三级分类左右联动，上拉加载以及下拉刷新