微信小程序实现上拉加载下拉刷新（即粘即用）

前言

去年有出过一篇关于 vue 实现上拉加载下拉刷新的功能，最近微信小程序中也用到了这个功能，下面一起来看看微信小程序中是怎么实现这个小功能的吧。

实现效果如下：

实现思路：

1. 首先需要在使用到的 json 文件下配置 "enablePullDownRefresh": true

{
   "usingComponents": {},
   "enablePullDownRefresh": true,
}

2. 在 js 文件中加上触底函数跟上拉函数

//触底函数
onReachBottom(){
    console.log("上拉加载....");
},
//上拉函数
onPullDownRefresh(){
    console.log("下拉刷新...");
},

3. 请求接口，将新请求的数据通过 cancat 方法合并到 list 数组中，然后更新数据

注： concat() 方法用于连接两个或多个数组

this.data.page++;
let list = that.data.list.concat(res.data.data.rows)
that.setData({
    list: list,
    loading: false,
});

4. 对数据进行判断，如果列表数据条数小于总条数，隐藏 “正在加载” 字样，显示 “已加载全部” 字样

if (res.data.data.rows.length < this.data.limit) {
    that.setData({
        loading: false,
        loaded: true,
    });
}

5. 上拉加载时，改变文字状态，然后调用接口

let that = this;
if (!that.data.loading) {
    that.setData({
        loading: true,
        loaded: false 
    });
}
setTimeout(function () {
    that.licensePort();
}, 500)

6. 下拉刷新时，将页码重置为 1 然后再次调用接口即可，但是不要忘了刷新完成后要关闭刷新的操作：wx.hideNavigationBarLoading() 和 wx.stopPullDownRefresh() 。

 this.data.list = []
 wx.showNavigationBarLoading() 
 this.setData({
     page: 1
 });
 this.licensePort(); 
 setTimeout(function () {
     wx.showToast({
         title: '刷新成功',
         icon: 'none',
         duration: 1000
     })
     wx.hideNavigationBarLoading() 
     wx.stopPullDownRefresh() 
 }, 1000)

其他你可能关注的配置：

json文件中：

1. backgroundTextStyle: light // 刷新时三个点的颜色，只能是 light 或者 dark

2. backgroundColor: #FC1944 // 刷新时背景的颜色

js文件中：

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

各文件完整代码如下：

wxml文件

<!-- 内容 -->
<view class="navBox" wx:for="{{list}}" wx:key="index">
    <view><text class="lableBox">区县</text>
        <text wx:if="{{item.dqbm == '610101'}}">市辖区</text>
        <text wx:if="{{item.dqbm == '610102'}}">新城区</text>
    </view>
    <view><text class="lableBox">企业名称</text> <text>{{item.qymc}}</text>
    </view>
    <view><text class="lableBox">道闸数量</text> <text>{{item.dzs}}</text></view>
    <view><text class="lableBox">行业类型</text>
        <text wx:if="{{item.hylb == '01'}}">长流程联合钢铁</text>
        <text wx:if="{{item.hylb == '02'}}">短流程钢铁</text>
        <text wx:if="{{item.hylb == '03'}}">铁合金</text>
        <text wx:if="{{item.hylb == '04'}}">焦化</text>
    </view>
    <view><text class="lableBox">联系人</text> <text>{{item.lxr}}</text></view>
    <view><text class="lableBox">电话</text> <text>{{item.lxdh}}</text></view>
    <view><text class="lableBox">地址</text> <text>{{item.qydz}}</text></view>
</view>
<!-- 加载时文字 -->
<view class="bomTxt">
    <view hidden="{{!loading}}">正在加载...</view>
    <view hidden="{{!loaded}}">已加载全部</view>
</view>

js文件

//获取应用实例
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)
            }
        })
    }
})

wxss文件

page {
    background: #EFF4FF;
}

.navBox {
    margin: 2.5%;
    font-size: 14px;
    border-radius: 36rpx;
    background: white;
}

.lableBox {
    display: inline-block;
    width: 90px;
    text-align: right;
    margin-right: 30rpx;
}

.navBox view {
    padding: 24rpx 30rpx;
}

.navBox view:not(:last-child) {
    border-bottom: 1px solid rgb(235, 237, 239);
}

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

json文件

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#6197FB",
  "navigationBarTitleText": "企业信息",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "light",
  "backgroundColor": "#6197FB"
}