uni-app 上拉加载

这个需求本身是很容易的，如果你的页面不需要自定义导航条，那么我们直接在页面中调用onReachBottom就可以实现

我的页面是需要自定义滚动条的，因此我需要两个东西

一个是scroll-view，我需要他包裹我的页面元素同时借助它提供的scroll事件获取用户滑动反馈

另一个则是上拉加载的组件（复制粘贴可直接使用）

<template>

<view class="uni-load-more">

<view class="uni-load-more__img" v-if="status === 'loading' && showIcon"><view class="loadingView" :style="{ color: color }">&#xeacd;</view></view>

<text class="uni-load-more__text" :style="{ color: color }">

{{ status === 'more' ? contentText.contentdown : status === 'loading' ? contentText.contentrefresh : contentText.contentnomore }}

</text>

</view>

</template>

<script>

export default {

name: 'uLi-load-more',

props: {

status: {

//上拉的状态：more-loading前；loading-loading中；noMore-没有更多了

type: String,

default: 'loading'

},

showIcon: {

type: Boolean,

default: true

},

color: {

type: String,

default: '#777777'

},

contentText: {

type: Object,

default() {

return {

contentdown: '上拉显示更多',

contentrefresh: '正在加载...',

contentnomore: '没有更多数据了'

};

}

}

},

data() {

return {};

}

};

</script>

<style lang="less" scoped>

@font-face {

font-family: 'iconfont';

src: url('https://at.alicdn.com/t/font_1288772_8nmx02hevxl.ttf') format('truetype');

}

.loadingView {

font-family: iconfont;

line-height: 1;

font-size: 40upx;

animation: rotate 3s linear infinite; //linear// 意思就是匀速的运动  infinite// 就是无限滚动的意思

}

@keyframes rotate {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

.uni-load-more {

display: flex;

flex-direction: row;

height: 80rpx;

align-items: center;

justify-content: center;

position: absolute;

left: 50%;

transform: translateX(-50%);

bottom: 200rpx;

&__text {

font-size: 28upx;

color: red;

}

&__img {

height: 24px;

width: 24px;

margin-right: 10px;

line-height: 1;

display: flex;

align-items: center;

justify-content: center;

}

}

</style>

最后我们只需要监听就可以了，参考代码如下