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

微信小程序實現上拉加載下拉刷新

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

(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;
}