uniapp怎么实现下拉刷新与上拉触底加载功能

这篇文章主要介绍“uniapp怎么实现下拉刷新与上拉触底加载功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“uniapp怎么实现下拉刷新与上拉触底加载功能”文章能帮助大家解决问题。

下拉刷新

这个用于监听该页面用户下拉刷新事件。

首先在pages.json中需要下拉刷新的页面，在style配置enablePullDownRefresh为true就可以了（要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh），然后在具体页面使用onPullDownRefresh回调函数就可以了。最后在当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

pages.json：

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "PULLANDREACHDEMO",
        "enablePullDownRefresh": true // 开启下拉刷新
    }
}

// 下拉刷新
async onPullDownRefresh() {
    console.log('下拉刷新-->>')
    this.dataListAll = await this.loadmore()
    this.getPageData()
    uni.stopPullDownRefresh() // 停止当前页面刷新
},

上拉触底加载 

只需要在style配置onReachBottomDistance 就可以了。页面上拉触底事件触发时距页面底部距离，单位只支持px

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "PULLANDREACHDEMO",
        "enablePullDownRefresh": true, // 下拉刷新
        "onReachBottomDistance": 50 // 页面上拉触底事件触发时距页面底部距离  触底加载
    }
}

然后页面中的回调 

// 触底加载
onReachBottom() {
    console.log('触底加载-->>')
    this.status = 'loading'
    setTimeout(() => {
        this.status = 'nomore'
        this.pageNo++
        this.getPageData()
    }, 500)
},

完整demo 

<template>
    <view class="index">
        <view v-for="(item, index) in dataList" :key="index">
            <image :src="item.url" mode=""></image>
            <view>列表长度--{{ index + 1 }}</view>
        </view>
        <u-loadmore :status="status" />
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                pageNo: 1,
                pageSize: 20,
                dataListAll: [],
                dataList: [],
                urls: [
                    'https://cdn.uviewui.com/uview/album/1.jpg',
                    'https://cdn.uviewui.com/uview/album/2.jpg',
                    'https://cdn.uviewui.com/uview/album/3.jpg',
                    'https://cdn.uviewui.com/uview/album/4.jpg',
                    'https://cdn.uviewui.com/uview/album/5.jpg',
                    'https://cdn.uviewui.com/uview/album/6.jpg',
                    'https://cdn.uviewui.com/uview/album/7.jpg',
                    'https://cdn.uviewui.com/uview/album/8.jpg',
                    'https://cdn.uviewui.com/uview/album/9.jpg',
                    'https://cdn.uviewui.com/uview/album/10.jpg',
                ],
                status: 'nomore'
            }
        },
        async onLoad() {
            this.dataListAll = await this.loadmore()
            this.getPageData()
        },
        // 下拉刷新
        async onPullDownRefresh() {
            this.dataListAll = await this.loadmore()
            this.pageNo = 1
            this.getPageData()
            uni.stopPullDownRefresh()
        },
        // 触底加载
        onReachBottom() {
            this.status = 'loading'
            setTimeout(() => {
                this.status = 'nomore'
                this.pageNo++
                this.getPageData()
            }, 500)
        },
        methods: {
            // 获取分页数据
            getPageData() {
                let curDataList = this.dataListAll.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
                if(curDataList.length) {
                    this.dataList.push(...curDataList)
                }
            },
            // 模拟请求 获取所有数据
            loadmore() {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        const dataList = []
                        for (let i = 0; i < 120; i++) {
                            dataList.push({
                                url: this.urls[uni.$u.random(0, this.urls.length - 1)]
                            })
                        }
                        resolve(dataList)
                    }, 500)
                })
            }
        }
    }
</script>
 
<style scoped>
.index {
    width: 100%;
    height: 100%;
    /* overflow: auto;
    overflow-x: hidden; */
}
.index > view {
    width: 100%;
    height: 120rpx;
    border-bottom: 1px solid #ccc;
    padding-left: 15rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.index > view > image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 12rpx;
    margin-right: 10rpx;
}
.index > view > view {
    line-height: 120rpx;
    font-size: 22rpx;
    color: #000000;
}
</style>

效果