小程序中实现上拉加载（python-flask后台）

上滑加载的原理说白了就是分页功能，每次触底的话page+1。 在传统情况下，触底判定是通过内容区域的高度乘以内容个数得出可视化数值，当滑动距离接近该数值时触发。

简单得是，在小程序中封装了一个方法，免去了繁琐的判断操作。直接在page() 下使用 onReachBottom 方法即可判定是否触底。

在web端，使用页数分页的话，在翻页之后不会保留上一页的数据，但是在移动端，滑到底部加载出数据之后，依然可以在上方保留原来的数据。这种实现方法只需把后来加载数据的与原有数据进行数组合并即可。

原文点这里：blogai.cn

先来看一下效果：

---

开始操作

flask后台

flask-sqlalchemy 中使用 pagination 对数据库查询进行分页，传入两个参数 页码（page） 每页显示数量 (per_page) 即可。其原理大体和 limit()差不多。

page 的值从小程序中接收，per_page 自己规定。所以，只需将查询结果转化为 json 就完成了。关于 json 的转化，可以移步这里。用python的flask给微信小程序写一个多层api(上)

后台代码如下:

@app.route('/mp/posts', methods=['POST', 'GET'])
def get_posts():
    page = request.values.get('page', 1, type=int)
    posts_ = Article.query.paginate(page, per_page=6, error_out=False)
    return jsonify({
        'posts': [post.to_dict() for post in posts_.items]  #对每个查询结果转化为json
    })

小程序

在小程序打开时，默认请求第一页，然后通过 onReachBottom 对触底进行判定，触底 page+1 ，继续请求数据，合并数据。 首先写一个分页函数：

  pagination(page){
        wx.request({
            url: 'http://127.0.0.1:5000/mp/posts',
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            data: {
                page: JSON.stringify(page) //把object转化为json数据
            },
            method: 'POST',
            success: u=> {
                let items = u.data.posts, //接收的数据
                posts = this.data.posts //原有数据
                console.log(items)
                this.setData({
                    posts:posts.concat(items)//合并数据
                })
            },
            fail: f=>{
                console.log(f)
            },
        })  
    },

界面加载时，请求一次，此时 page = 1。

 onLoad: function (options) {
        this.pagination(this.data.page)
    },

触底时继续请求：

 onReachBottom: function () {
        console.log('触底了')
        wx.showLoading({
            title: '数据加载中...',
            icon: 'loading',
            duration: 1000
        })
        let page = this.data.page +1
        this.pagination(page)
        this.setData({
            page:page
        })
    },

 

---

 

完整代码都在 github: Jarry007 欢迎 star 和 fork。