微信小程序实现上拉加载下拉刷新

1.wxml文件

  <view wx:for="{{list}}" wx:key="key">
  	 <view>这里是你循环的数据</viwe>
  </view>
  <view class="bomTxt">
        <view hidden="{{!loading}}">正在加载...</view>
        <view hidden="{{!loaded}}">已加载全部</view>
  </view>

2.js文件

wx.showNavigationBarLoading() //在标题栏中显示加载


var app = getApp();
Page({
    data: {
        page: 1, //当前第几页
        limit: 3, //一页展示几条
        list: [], //所有数据
        loading: false, //是否展示 “正在加载” 字样
        loaded: false //是否展示 “已加载全部” 字样
    },
    //生命周期函数--监听页面加载
    onLoad: function (options) {
        this.informPort(); //调用接口方法
    },
    // 企业信息接口
    informPort() {
        var that = this; // //防止this指向问题
        // 后台需要的参数
        app.http.informPort({
            qymc: "",
            page: this.data.page,
            limit: this.data.limit,
        }).then(res => {
            if (res.data.code == '10000') {
                if (res.data.data.records && res.data.data.records.length > 0) {
                    // console.log("请求成功", res.data.data.records)
                    this.data.page++;
                    //新请求的数据通过cancat方法合并到list数组中
                    let list = that.data.list.concat(res.data.data.records)
                    // 更新数据
                    that.setData({
                        list: list,
                        loading: false,
                    });
                    //如果列表数据条数小于总条数，隐藏 “正在加载” 字样，显示 “已加载全部” 字样
                    if (res.data.data.records.length < this.data.limit) {
                        that.setData({
                            loading: false,
                            loaded: true,
                        });
                    }
                } else {
                    that.setData({
                        loaded: true, //显示 “没有数据” 字样 
                        loading: false //隐藏 “正在加载” 字样
                    });
                }
            }
        })
    },
    // 触底函数---上拉加载
    onReachBottom() {
        let that = this; //防止this指向问题
        if (!that.data.loading) {
            that.setData({
                loading: true, //加载中
                loaded: false //是否加载完所有数据
            });
        }
        //延时调用接口
        setTimeout(function () {
            that.informPort();
        }, 500)
    },
    // 上拉函数---下拉刷新
    onPullDownRefresh() {
     	this.data.list = []
        wx.showNavigationBarLoading() //在标题栏中显示加载圈圈
        this.setData({
            page: 1
        }); //重置页码
        app.http.informPort().then(res => {
            if (res.data.code == '10000') {
                setTimeout(function () {
                    wx.showToast({
                        title: '刷新成功',
                        icon: 'none',
                        duration: 1000
                    })
                    wx.hideNavigationBarLoading() //完成停止加载
                    wx.stopPullDownRefresh() //停止下拉刷新
                }, 1000)
            } else if (res.data.code != 10000) {
                setTimeout(function () {
                    wx.showToast({
                        title: '刷新失败',
                        icon: 'none',
                        duration: 1000
                    })
                    wx.hideNavigationBarLoading() //完成停止加载
                    wx.stopPullDownRefresh() //停止下拉刷新
                }, 1000)
            }
        })
    }
})

3wxss文件

page {
    background: #EFF4FF;
}
.bomTxt {
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: rgb(126, 138, 155);
    padding: 0rpx 0rpx 20rpx 0rpx;
}