分页系列之四：微信小程序滚动加载分页数据

在app.js中添加一个函数，其他页面加载分页数据时，统一调用这个函数。

App({
    loadData: function (that, url, data) {
        that.setData({
            loadText: '正在加载',
            loadClass: 'loadTip icon i-loading' + (that.data.array.length == 0 ? ' big' : '')    //显示一个loading动画
        });
        data.page = that.data.page;    //当前页码
        data.pageSize = that.data.pageSize;    //每页记录数
        data.UserID = wx.getStorageSync('User').ID;    //当前用户ID，如果不需要，可删除
        wx.request({
            url: url,
            data: data,
            success: function (res) {
                //不同于jQuery的AJAX，这里success回调还需要判断状态码，200才表示成功
                if (res.statusCode == 200) {
                    that.setData({
                        array: that.data.array.concat(res.data.List),
                        total: res.data.Total
                    });
                    if (res.data.Total == 0) {
                        that.setData({
                            loadText: '没有相关信息',
                            loadClass: 'loadTip big icon i-info'
                        });
                    }
                    else if (that.data.page == Math.ceil(res.data.Total / that.data.pageSize)) {
                        that.setData({
                            loadText: '全部加载完成',
                            loadClass: 'loadTip'
                        });
                    }
                    else {
                        that.setData({
                            page: that.data.page + 1,
                            loadText: '上滑加载更多',
                            loadClass: 'loadTip'
                        });
                    }
                }
                else {
                    that.setData({
                        loadText: '加载失败，点此重试',
                        loadClass: 'loadTip' + (that.data.array.length == 0 ? ' big icon i-sad' : '')
                    });
                }
            },
            fail: function () {
                that.setData({
                    loadText: '加载失败，点此重试',
                    loadClass: 'loadTip' + (that.data.array.length == 0 ? ' big icon i-sad' : '')
                });
            }
        });
    }
});

上面的loadClass表示调用的CSS类名，相关CSS代码在app.wxss中，必要代码如下，其中使用了图标字体（https://www.iconfont.cn）

page {
    background: #eee;
    color: #151516;
    font-size: 32rpx;
    font-family: Arial, Helvetica, sans-serif;
}
.loadTip {
    font-size: 32rpx;
    clear: both;
    width: 100%;
    text-align: center;
    padding-bottom: 16rpx;
}
.loadTip.big {
    margin-top: 48%;
}
.loadTip.big:before {
    font-size: 80rpx;
    color: #a6a6a6;
    width: 100%;
    display: inline-block;
    margin-bottom: 10rpx;
}
.i-loading:before {
    display: inline-block;
    animation: rotate 2s infinite linear;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}
@font-face {font-family: "icon";
    src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}
.icon {
    font-family: "icon" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.i-info:before {
    content: "\e727";
}
.i-loading:before {
    content: "\e6ae";
}
.i-sad:before {
    content: "\e610";
}

下面为某个滚动加载数据的页面

pages\purchase\list.wxml

<view id='topBar'>
    <text bindtap="changeMyStatus" class='{{MyStatus == 0 ? "selected" : ""}}' data-mystatus="0">待我审批</text>
    <text bindtap="changeMyStatus" class='{{MyStatus == 1 ? "selected" : ""}}' data-mystatus="1">我已审批</text>
    <text bindtap="changeMyStatus" class='{{MyStatus == 2 ? "selected" : ""}}' data-mystatus="2">已被退回</text>
    <text bindtap="changeMyStatus" class='{{MyStatus == 9 ? "selected" : ""}}' data-mystatus="9">全部信息</text>
</view>
<view wx:for="{{array}}" wx:key="ID" data-id="{{item.ID}}" bindtap="itemTap" class='list'>
    ......
</view>
<view class='{{loadClass}}' bindtap='retry'>{{loadText}}</view>

pages\purchase\list.js

var app = getApp();
Page({
    data: {
        page: 1,
        pageSize: 50,
        array: [],
        MyStatus: 0
    },
    onLoad: function (e) {
        this.loadData();
    },
    onPullDownRefresh: function () {
        this.setData({
            page: 1,
            array: []
        });
        wx.stopPullDownRefresh();
        this.loadData();
    },
    onReachBottom: function () {
        if (this.data.loadText == '上滑加载更多') {
            this.loadData();
        }
    },
    changeMyStatus: function (e) {
        this.setData({
            page: 1,
            array: [],
            MyStatus: e.target.dataset.mystatus
        });
        this.loadData();
    },
    retry: function (e) {
        if (this.data.loadText == '加载失败，点此重试') {
            this.loadData();
        }
    },
    itemTap: function (e) {
        wx.navigateTo({
            url: 'detail?id=' + e.currentTarget.dataset.id
        });
    },
    loadData: function () {
        app.loadData(this, 'https://www.xxx.cn/Purchase/List', {
            MyStatus: this.data.MyStatus
        });
    }
});

pages\purchase\list.wcss

page {
    padding-top: 96rpx;
}
#topBar {
    position: fixed;
    display: flex;
    top: 0;
    width: 100%;
    background: #fff;
}
#topBar text {
    flex: 1;
    text-align: center;
    border-bottom: #d2d2d2 1rpx solid;
    height: 80rpx;
    line-height: 80rpx;
    color: #58595b;
}
#topBar text.selected {
    color: #e02e24;
    border-bottom-color: #e02e24;
}
.list {
    background: #fff;
    margin-bottom: 16rpx;
}
.list .a {
    padding: 22rpx;
    border-bottom: #ededed 1rpx solid;
}
.list .a text {
    float: right;
    color: #e13127;
}
.list .b {
    padding: 10rpx 22rpx;
}
.list .c {
    border-top: #ededed 1rpx solid;
    padding-left: 22rpx;
    height: 86rpx;
    line-height: 86rpx;
}
.list .c text {
    width: 200rpx;
    text-align: center;
    float: right;
    border-left: #ededed 1rpx solid;
}
.list .c text.highlight {
    color: #e13127;
}
text.half {
    display: inline-block;
    width: 50%;
}

wx.request需要返回如下格式的JSON数据，这里模拟最后一页的数据，每页50条，总记录103条，返回最后3条。

{
    "Total": 103,
    "List": [{
        "ID": 666,
        "Title": "aaa"
    }, {
        "ID": 888,
        "Title": "bbb"
    }, {
        "ID": 999,
        "Title": "ccc"
    }]
}

----分页系列----

五、WinForm + DevExpress 自制分页控件

posted on 2021-04-26 20:16 羊茂林阅读(1491) 评论(0) 编辑收藏举报

刷新页面返回顶部

羊茂林

分页系列之四：微信小程序滚动加载分页数据

导航

公告