美文网首页
uni app 实现简单的上拉加载,下拉刷新

uni app 实现简单的上拉加载,下拉刷新

作者: 上海_前端_求内推 | 来源:发表于2021-10-22 16:16 被阅读0次

1,定义data数据

pageSize: 10,//条数
currentPage: 1,//页数
datalist: {},//数据

2,请求数据

getList(HospitalCode, index) {
                this.$request('/api/eurekamedicalsystem/v2/medical-critical-value', {
                    "HospitalCode": HospitalCode,
                    "statusCode": this.state,
                    "reportEndDatetime": this.reportEndDatetime,
                    "reportStartDatetime": this.reportStartDatetime,
                    "sorting": "DealDatetime desc",
                    // "key": this.searchValue
                    "pageSize": this.pageSize,
                    "currentPage": this.currentPage
                }).then(res => {
                    //上拉加载数据开始
                    if (res.items.length == 0) {
                        // this.contentText = '没有更多了'
                        uni.showToast({
                            title: '没有更多数据了',
                            icon: "none"
                        });
                    }
                    if (this.currentPage != 1) {
                        this.datalist = this.datalist.concat(res.items)
                    } else {
                        this.datalist = res.items
                           //上拉加载数据结束
                    }
    
                })
            },

3,如果有切换事件,重置页数及数据

change(e) {
                this.pageSize = 10
                this.currentPage = 1
                this.datalist = {}
                this.getList(this.HospitalCode, e)
            },

4,上拉及下拉

// 下拉刷新
        onPullDownRefresh() {
            let _self = this
            console.log('refresh');
            setTimeout(function() {
                uni.stopPullDownRefresh(); //停止当前页面下拉刷新
                _self.currentPage = 1;
                _self.getList(_self.HospitalCode);
            }, 500);
        },

        // 上拉加载
        onReachBottom() {
            let _self = this
            uni.showNavigationBarLoading()
            console.log('reach');
            setTimeout(function() {
                _self.currentPage++;
                _self.getList(_self.HospitalCode)
                uni.hideNavigationBarLoading()
            }, 500);
        },

5,下拉刷新需要修改package.js

"enablePullDownRefresh": true,

"style": {
                "navigationBarTitleText": "预约检查",
                "enablePullDownRefresh": true,
                "backgroundColor": "#E7EBE7",
                "backgroundColorTop": "#ffffff",
                "app-plus": {
                    "titleNView": {
                        "titleSize": "40rpx"
                    }
                }
            }

相关文章

网友评论

      本文标题:uni app 实现简单的上拉加载,下拉刷新

      本文链接:https://www.haomeiwen.com/subject/mgxhaltx.html