小程序开发：上拉加载数据

Chiclaim 发布于2019-07-01 11:14 / 838人阅读

摘要：导语需求是上拉加载数据，实际就是获取分页数据。后台就是正常的请求分页数据，小程序部分稍复杂些，查了一些资料完成的，但是资料的链接找不到了，不能放上以供参考了。小程序页面涉及到数据循环，下面是简单的实例的开发模式例如，提倡把渲染和逻辑分离。

导语

需求是上拉加载数据，实际就是获取分页数据。后台就是正常的ajax请求分页数据，小程序部分稍复杂些，查了一些资料完成的，但是资料的链接找不到了，不能放上以供参考了。

小程序页面

涉及到数据循环，下面是简单的实例

 
     {{item.name}}
     {{item.age}}

MVVM 的开发模式(例如 React, Vue)，提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

小程序JS部分

JS部分负责的是获取数据，以及拼接数据

Page({

    /**
     * 页面的初始数据
     */
    data: {
        array: [],
        page: 1,
        isReachBottom: true // 是否上拉加载
    },

    // 获取数据
    getList: function () {
        var that = this;
        wx.request({
            url: "https://xxx",
            data: {
                p: that.data.page
            },
            success: function (res) {
                if (res.data.message == "success") {
                    // 获取成功，数据追加
                    var list = [];
                    var count = res.data.data.length
                    for (var i = 0; i < count; i++) {
                        var data = {name: "", age: ""};
                        data.name = res.data.data[i].name;
                        data.age = res.data.data[i].age;
                        list.push(data);
                    }
                    Array.prototype.push.apply(that.data.array, list);
                    that.setData({
                        array: that.data.array
                    })
                } else if (res.data.message == "finish") {
                    // 没有数据，禁止再次上拉加载
                    that.setData({
                        isReachBottom: false
                    })
                }
            }
        })
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.data.isReachBottom == true) {
            this.setData({
                page: this.data.page + 1
            })
            this.getList()
        }
    }

})

关于上拉触底，还有这些特性

参考资料：小程序、列表渲染、注册页面。

GPU云服务器云服务器 js上拉加载数据上拉加载小程序开发开发小程序开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/29994.html

总结开发过程踩到的坑（五）（小程序篇）

摘要：最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。的使用微信小程序不支持原生页面跳转，包括和，若要跳转小程序应用内页面，需要使用，详见。参考文献微信小程序开发者文档最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。不得不说，微信的野心真是越来越大了，但是它超高的流量注定了它有这个资本。原文地址：mini programs 目...

young.li 2019-08-29 15:38 评论0 收藏0
总结开发过程踩到的坑（五）（小程序篇）

摘要：最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。的使用微信小程序不支持原生页面跳转，包括和，若要跳转小程序应用内页面，需要使用，详见。参考文献微信小程序开发者文档最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。不得不说，微信的野心真是越来越大了，但是它超高的流量注定了它有这个资本。原文地址：mini programs 目...

Cympros 2019-08-26 12:00 评论0 收藏0
「轻算账」小程序实践笔记

摘要：资源开发文档是一套完全免费的微信小程序开发框架，扩展了小程序的能力。推荐有一些不错的解决方案封装封装跨页面事件通讯监听数据变化开发如何在微信小程序的页面间传递数据需要时可以快速过一遍。微信小程序回调，，，的使用例子供参考这篇文章主要记录我做小程序「轻算账」过程中遇到的一些问题和解决方案，就当是做个总结，也希望其中有能够帮助到他人的信息。 showImg(https://segment...

BigTomato 2019-08-23 13:45 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0