微信小程序——上拉、下拉实现

下拉

1. json配置 下拉操作

{
    "enablePullDownRefresh": true
}

2. 下拉代码 onPullDownRefresh

  async onPullDownRefresh() {
        //在当前页面显示导航条加载动画
        wx.showNavigationBarLoading();
        //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
        wx.showLoading({
            title: '刷新中...',
        })
        await this.onLoad()
        //隐藏loading 提示框
        wx.hideLoading();
        //隐藏导航条加载动画
        wx.hideNavigationBarLoading();
        //停止下拉刷新
        wx.stopPullDownRefresh();
    },

上拉 

主要是分页操作

    data: {
        filesArr: [],
        pageSize: 10,
        currentPage: 1,
        total_count: 0,
    },

 

//底部加载
    async onReachBottom() {
        //console.log("触底上滑")
        if (this.data.currentPage * this.data.pageSize >= this.data.total_count) {
            asyncWx.showToast({
                title: "已经到底了！！！"
            })
        } else {
            this.setData({
                currentPage: this.data.currentPage + 1
            })
            await this.getFilesHis()
        }
    },



    async getFilesHis() {
        if (!userInfo.uNo || this.data.total_count <= 0) {
            return
        }
        wx.showLoading({
            title: '加载中...',
            mask: true
        })
        res = await asyncWx.request({
            url: appInstance.globalData.host + "/loadFilesRecord",
            header: {
                'content-type': 'application/json' // 默认值
            },
            method: 'POST',
            data: {
                uNo: userInfo.uNo,
                sPage: this.data.currentPage,
                pageCount: this.data.pageSize
            },
        })
        console.log("历史文件记录", res)
        res = res.data.recordset

        this.setData({
            filesArr: this.data.filesArr.concat(res)
        })

        wx.hideLoading({
            success: (res) => {},
        })
        return
    },