让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键-Toy模板网

这篇具有很好参考价值的文章主要介绍了让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

上拉加载和下拉刷新是小程序开发的常见需求。本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能，为用户带来更加流畅、便捷的使用体验。

实现效果如下：

让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键

实现思路：

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>{{item.dqbm}}</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: 10, //一页展示几条
        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)
                    that.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 < that.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"
}