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

Posted 2020-11-22 haonanElva

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

使用小程序默认提供方法。

(1). 在xxx.json 中开启下拉刷新，需要设置backgroundColor，或者是backgroundTextStyle ，因为加载的动画可能会是白色背景，会看不清。

{
    "usingComponents": {
        "annicate": "/components/annicate/index"
    },
    "navigationBarTitleText": "通告列表",
    "enablePullDownRefresh": true,
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "dark"
}

(2). 在 js 中处理逻辑

/**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        // 标题栏显示刷新图标，转圈圈
        wx.showNavigationBarLoading()
        // 请求最新数据
        this.initDate(true);
        setTimeout(() => {
            // 标题栏隐藏刷新转圈圈图标
            wx.hideNavigationBarLoading()
        }, 1000);
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        setTimeout(() => {
            this.initDate();
        }, 300);
    },

data 中

loading: false,                         // 是否正在加载中
        loaded: false,                          // 是否加载完全部数据

/**
     * 初始化数据
     */
    initDate: function (isPage) {
        var that = this;
        // 加载第一页
        if (isPage === true){
            that.setData({ 
                notice_list: [],
                page: 1
            });
        } else {
            var num = that.data.page + 1;
            if (num <= that.data.totalPage) {
                that.setData({
                    page: num
                });
            } else if (num > that.data.totalPage) {
                that.setData({
                    loaded: true
                });
            }
        }

        if (that.data.loading) return;
        if (that.data.loaded) return;
        
        var json = {
            keywords: that.data.keywords
        };
        wx.showLoading({
            title: ‘加载中‘,
        })

        that.setData({ loading: true, loadTitle: ‘‘ });
        noticeList(json).then(res => {
            let notice_list = app.SplitArray(res.data.notice_list.list, that.data.notice_list);
            wx.hideLoading()
            that.setData({
                notice_list: notice_list,
                loading: false,
                loadTitle: that.data.page == res.data.notice_list.total_page ? ‘已全部加载‘ : ‘加载更多‘,
                totalPage: res.data.notice_list.total_page
            });
        }).catch(err => {
            that.setData({ loading: false, loadTitle: ‘加载更多‘ });
        });;
    },

页面中

<view class=‘annicate_wrap‘>
            <annicate bindtap=‘detailFun‘ wx:for="{{notice_list}}" wx:key="index" jsonDate="{{item}}"></annicate>
            <view class=‘loadingicon acea-row row-center-wrapper‘ wx:if=‘{{notice_list.length > 0}}‘>
                <text class=‘loading iconfont icon-jiazai‘ hidden=‘{{loading==false}}‘></text>{{loadTitle}}
            </view>
        </view>

app.SplitArray是小程序连接两个数组的方法

app.js 中

/*
     * 合并数组
     * @param array list 请求返回数据
     * @param array sp 原始数组
     * @return array
     */
    SplitArray: function(list, sp) {
        return util.SplitArray(list, sp)
    }

untils 中

/*
* 合并数组
*/
const SplitArray = function (list, sp) {
    if (typeof list != ‘object‘) return [];
    if (sp === undefined) sp = [];
    for (var i = 0; i < list.length; i++) {
        sp.push(list[i]);
    }
    return sp;
}