小程序上拉加载更多数据

本人也是新手进行刚刚接触小程序然后需要一个上拉加载数据的代码，百度看了一下自己做出一点总结希望可以帮助跟我一样入坑的新手

首先是页面.wxml代码

<!--上拉刷新加载-->
<page><view class="item" wx:for="{{shujulist}}"><view class="text"><text class="title">{{item.id}}</text><text class="description">{{item.name}}</text></view></view>
</page>

接下来是.json代码

{"enablePullDownRefresh": true,//这个是上拉下拉刷新设置的，不加这个默认不会刷新上拉下拉刷新的"onReachBottomDistance": 0//这个是距离多远触发上面那个设置
}

最后是.js代码了

//定义全局变量
var url = "http://192.168.0.125:99/admin/Index/shuju";
var page = 0;//定义一个数组，这个数组写在data里面，用于页面上面的加载
"shujulist": [],// 请求数据
var loadMore = function(that) {wx.showLoading({title: '玩命加载中',//上拉的时候会出现一个提示框})wx.request({url: url,data: {page: page},method: 'POST',header: {'content-type': 'json'},success: function(res) {console.log(res);//注意这个地方，我再上面改成用GET访问数据后，然后这个回调数据就多了一个data，你们自己要多多注意，我也不知道什么问题var shujulist = that.data.shujulist;for (var i = 0; i < res.data.length; i++) {shujulist.push(res.data[i]);}that.setData({shujulist: shujulist});page++;wx.hideLoading();}});
}//这个方法写在Page()里面这个是监听屏幕滑到最下面时候的事件
onReachBottom: function() {var that = this;loadMore(that);
}

最后温馨提醒一下，要把开发工具中的不效验合法域名给勾上，不然访问数据的时候他会一直提示你域名不合法。

小程序上拉加载更多数据相关推荐

小程序上拉加载更多数据，分类切换状态等实例
发现很多人对小程序的文章比较好奇,购物车那篇居然占了快三分一的访问量,因此写多篇关于小程序的常用功能. 上拉加载更多其实很简单,关键点只是知道上拉加载是变相的分页加载,然后通过初始化记录值和通过数组来 ...
微信小程序上拉加载更多数据
data: {curpage: 1,list: null }, onLoad: function() {wx.showLoading();var _this = this;/**初始化list*/_t ...
微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题.其实理清楚什么时候请求数据.请求返回的几种情况,那么做这个懒加载就很简单了. 一.首先,固定一个 ...
小程序上拉加载更多之onReachBottom()
在你没有用scroll-view的上拉加载更多时,可以试试onReachBottom()这种方式实现上拉加载更多! xxx.json里面设置: "enablePullDownRefresh& ...
微信小程序上拉加载更多
来个上拉刷新,解决一下上拉问题.上拉小伙伴除了用微信小程序自带的onReachBottom外,最多用的就是scroll-view的上拉加载啦.但是呢,scroll-view上拉加载会一到底部就不断的触 ...
小程序下拉加载更多数据
1 功能介绍 1.1 简单列表分页功能描述:拖动下拉条,可以加载更多内容 1.1.1 实现步骤 1.1.1.1 配置.json文件 1) 在app.json页面配置&q ...
微信小程序 - 上拉加载更多组件
详情用例看demo,点击下载示例:loadmore 转载于:https://www.cnblogs.com/cisum/p/10430907.html
微信小程序如何实现上拉加载更多数据?
思路:在下拉到页面的时候我们可以进行数据请求,请求到在上次加载完毕的后五条数据 (举个例子),通过page(页码),count(加载数据得条数)与start进行联接,我们可以发现:start:(pag ...
微信小程序上拉加载加载更多数据触底加载点击加载更多数据
开发需求进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml  <view wx:for=&q ...

小程序上拉加载更多数据

小程序上拉加载更多数据相关推荐

最新文章

热门文章