uniapp 上拉加载&下拉刷新

上拉加载&下拉刷新   方法1

<script>
    export default {
        data() {
            return {
                listQuery: {
                    pageNo: 1,
                    pageSize: 10,
                }, //分页
                list: [], //列表
                totalPage: 1 //当前页
            };
        },
        onl oad() {
            this._orderRecord()
        },
        methods: {
            /*获列表
             * @params this.listQuery 分页数据
             */
            _orderRecord() {
                let that = this;
                if (this.listQuery.pageNo === 1) this.list = [];
                this.$api.api.orderRecord(this.listQuery).then(res => {
                    setTimeout(function() {
                        uni.hideLoading();
                        that.list = that.list.concat(res.list);
                        that.totalPage = res.totalPage
                    }, 500);
                });
            },

            /* 上拉加载 */
            onReachBottom() {
                uni.showLoading({
                    title: '加载中'
                });
                if (this.totalPage <= this.listQuery.pageNo) {
                    uni.hideLoading();
                    uni.showToast({
                        title: '没有更多了',
                        duration: 2000,
                        icon: 'none'
                    });
                    return
                }
                this.listQuery.pageNo += 1;
                this._orderRecord()
            },

            /* 下拉刷新 */
            onPullDownRefresh() {
                this.listQuery.pageNo = 1;
                this._orderRecord();
            },
        }
    };
</script>

方法2

// 1.pages.json配置

{
    "path": "banner/index/index",
    "style": {
                "navigationBarTitleText": "XXXXX",
                "enablePullDownRefresh": true
             }
},

// 声明变量条件
data(){
   return{
               // 收到的
                listData: [],//信息list
                listAll: 0,//信息总数
                listPage: 1,//请求页数
                listLoading: false,//是否正在加载
   }
}

// method 方法获取列表信息

receivedLetter() {
        // 停止刷新请求条件
    if (this.listData && this.listData.length !== 0 && this.listData.length >= this.listAll) {
                 uni.stopPullDownRefresh()
                 return
              }
 
                this.listLoading = true//开始请求
                this.$api.getMyDetailData({
                    biz_id: this.$store.state.user_biz_id,//参数根据业务需求
                    ptype: "get",
                    page: this.listPage,//重点是这个会变的请求页码
                    limit: 10
                }).then(res => {
                    console.log("请求", res)
                    this.listLoading = false  //请求完成
                    this.listData.push(...res.data) //追加数据
                    uni.stopPullDownRefresh()  //停止刷新
                    
                })
            },

// 首次加载&监听触底上拉和下拉

       mounted() {
            uni.startPullDownRefresh()    
       },
       // 下拉触底函数
        onReachBottom() {
            //加载中就不进行加载
            if (this.listLoading) {
                    return
            } else {
                    //加载下一页    
                    this.receivedLetter()//第一次的时候listPage=1
                    this.listPage++    
            }
        },
        // 监听下拉更新 （重新获取第一页信息）
        onPullDownRefresh() {
            //初始化信息
            this.listPage = 1
            this.listLoading = false
            this.listData = []
            this.listAll = 0
            this.receivedLetter()
        },