uniapp下拉刷新上拉加载-蒲公英云

uniapp下拉刷新上拉加载

一、需求

留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据

二、代码

在这里插入图片描述
1、pages.json

2、messageBoard.vue

用了 uniapp 提供的组件： uni-load-more.vue

<uni-load-more :status="loadingText" :contentText="contentText" ></uni-load-more>
const loadingTextObj = { 
    more: 'more',
    noMore: 'noMore',
    loading: 'loading'
}
const contentTextObj = { 
    contentdown: '上拉显示更多',
    contentrefresh: '正在加载...',
    contentnomore: '没有更多数据了'
}
data() { 
    return { 
        // 分页功能
        loadingText: loadingTextObj.more,
        loadingType: 0, // 定义加载方式 0---contentdown 1---contentrefresh 2---contentnomore
        contentText: contentTextObj,
    }
},
//下拉刷新
onPullDownRefresh() { 
    console.log('下拉刷新')
    this.initPageInfo()
},
//触底加载更多
onReachBottom(e) { 
    const _this = this
    console.log('触底加载更多')
    if (timer != null) { 
        clearTimeout(timer)
    }
    timer = setTimeout(function() { 
        if (_this.loadingType === 2) return false
        else _this.doMoreData()
    }, 1000)
},
methods: { 
    initPageInfo() { 
        const _this = this
        page = 1
        this.messageInfo = []
        this.doLoadingStatus(0)
        uni.showNavigationBarLoading()
        // 接口联调
        this.doMessageBoard()
        return false
        setTimeout(() => {  // 这里面是模拟的假数据
            page++ // 得到数据之后page+1
            _this.messageInfo = messageData // messageData为自己造的假数据
            uni.hideNavigationBarLoading()
            uni.stopPullDownRefresh() // 得到数据后停止下拉刷新
        }, 1000)
    },
    // 加载状态
    doLoadingStatus(type) { 
        if (type === 0) { 
            this.loadingType = 0
            this.loadingText = loadingTextObj.more
        }else if (type === 1) { 
            this.loadingType = 1
            this.loadingText = loadingTextObj.loading
        } else if (type === 2) { 
            this.loadingType = 2
            this.loadingText = loadingTextObj.noMore
        }
    },
    // 获取留言板列表
    doMessageBoard() { 
        const _this = this
        let opts={ 
            url: '/***',
            method: 'POST'
        }
        let param={ 
            page: page,
            pageSize: pageSize,
        }
        this.HTTP.httpFromDataRequest(opts, param).then(res => { 
            if(res.data.success){ 
                const {  data } = res.data
                if (data.list === null) { 
                    _this.doLoadingStatus(2)
                    uni.hideNavigationBarLoading() // 关闭加载动画
                    return
                }
                page++ // 得到数据之后page+1
                if (_this.messageInfo.length === 0) _this.messageInfo = data.list
                else _this.messageInfo = [..._this.messageInfo, ...data.list]
                if (data.list.length < pageSize) { 
                    _this.doLoadingStatus(2)
                } else{  // 将loadingType归0重置
                    _this.doLoadingStatus(0)
                }
                uni.hideNavigationBarLoading(); // 关闭加载动画
                uni.stopPullDownRefresh() // 得到数据后停止下拉刷新
            }else{ 
                uni.showToast({ 
                    title: res.data.message
                })
            }
        },error => { console.log(error);})
    },
    // 分页功能---加载更多数据
    doMoreData() { 
        const _this = this
        if (this.loadingType !== 0) { // loadingType != 0 直接返回
            return false
        }
        this.doLoadingStatus(1)
        uni.showNavigationBarLoading()
        this.doMessageBoard()
        return false
        setTimeout(() => { 
            const res = { 
                data: null
            }
            res.data = '111'
            if (res.data === null) { 
                _this.loadingType = 2
                _this.loadingText = loadingTextObj.noMore
                uni.hideNavigationBarLoading() // 关闭加载动画
                return
            }
            page++ // 每触底一次 page +1
            _this.messageInfo = [..._this.messageInfo, ...messageData]
            _this.loadingType = 0; // 将loadingType归0重置
            _this.loadingText = loadingTextObj.more
            uni.hideNavigationBarLoading(); // 关闭加载动画
        }, 3000)
    }, // end doMoreData
}