微信小程序上拉加载流程

1.首先需要在微信官方文档把scroll-view这个方法引入进来，然后使用这个方法，在样式里面写scroll-y，代表的是上下滑动，然后给滑动的盒子一个高度，100vh，然后开启bindscrolltolower这个事件，给他一个事件名，这个事件代表的意思是到达底部的时候触发

2.在滑动的标签里面先三个样式，在上拉的时候需要用到，第一个：是加载中：loading，第二个：是没有更多啦：noMore，第三个是：数据加载失败：loadingFailed：把这三个都用if判断给他们判断一个，在js文件里面默认值都定为false，

3.loading：需要定义一个开关，要不然第一次数据还没加载出来，还继续往上拉的话，它还会请求数据加载，这样就会增加服务器的压力，首先给他定义为false，先让开关是开着的，等第一页数据显示出来，往上拉的时候让开关是关闭的状态，只有请求到第二页的数据的时候在让它打开，请求到第二页数据的时候需要拼接在第一页后面，请求到第二页数据的时候，又让开关关闭

4.noMore：首先定义为false，它定义为false的意思是当我们循环的数据没有啦，也就是拉到最后面没有数据显示啦，让他显示没有数据啦

5.loadingFailed：首先也是定义为false，它定义的意识是当请求不到网络，没有网的时候，或者请求超时的时候，让他显示加载失败

6.把这三个时间先定义到以后，下面来说一下上拉加载js里面的思路

6.1：首先写一个函数来封装上拉加载的代码，为了就是在别的地方用到的时候直接调用，比较方便

6.2：函数写好以后，里面会传一个参数，这个参数的含义就是为了判断开始的时候页面显示的是不是第一页的数据，通过这个参数可以拿到我们需要的两个参数，type和page，在请求数据的时候需要用到这两个参数，拿到这两个参数以后，赋值给接口自带的两个参数，

6:3：请求数据成功，调用.then这个方法，下面开始判断，如果请求到的不是第一页的数据，就让他拼接，等加载完成，请求到第二页的数据以后让他拼接，通过concat这个关键字，开关打开，否则让他显示第一页的数据

7.下一步判断，如果请求的数据长度等于0的话，说明已经没有数据啦，让noMore等于false，显示没有数据啦

8.接口请求失败或者没有网络，请求超时的话，调用catah这个方法，让loadingFailed: true，显示加载失败

9.接下来写滑动到底部的事件，用我们刚才写的事件名scrollToLower，在写一个函数，传一个参数，通过这个参数可以拿到我们需要的type和page这两个参数，然后赋值给接口自带的两个参数，到达底部的时候，也就是我们上拉请求第二页数据的时候，当请求到第二页数据的时候，让他的页数加1，然后调用请求数据这个接口，让数据渲染到页面

微信小程序上拉加载流程相关推荐

微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题.其实理清楚什么时候请求数据.请求返回的几种情况,那么做这个懒加载就很简单了. 一.首先,固定一个 ...
微信小程序上拉加载更多
来个上拉刷新,解决一下上拉问题.上拉小伙伴除了用微信小程序自带的onReachBottom外,最多用的就是scroll-view的上拉加载啦.但是呢,scroll-view上拉加载会一到底部就不断的触 ...
微信小程序上拉加载配置，上拉加载设置不生效问题
一.上拉加载配置 1:json文件配置 "onReachBottomDistance": 50 {"usingComponents": {},"nav ...
微信小程序上拉加载加载更多数据触底加载点击加载更多数据
开发需求进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml  <view wx:for=&q ...
微信小程序上拉加载更多数据
data: {curpage: 1,list: null }, onLoad: function() {wx.showLoading();var _this = this;/**初始化list*/_t ...
微信小程序 - 上拉加载更多组件
详情用例看demo,点击下载示例:loadmore 转载于:https://www.cnblogs.com/cisum/p/10430907.html
微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新微信小程序下拉加载和上拉刷新两种实现方法方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里 ...
小程序上拉加载，下拉刷新
小程序上拉加载,下拉刷新 data: {collectinformation: null,number: 1,size: 10,isOpenLoading: true,isEmpty: true,is ...
小程序上拉加载更多数据
本人也是新手进行刚刚接触小程序然后需要一个上拉加载数据的代码,百度看了一下自己做出一点总结希望可以帮助跟我一样入坑的新手首先是页面.wxml代码  <pa ...

微信小程序上拉加载流程

微信小程序上拉加载流程

6.把这三个时间先定义到以后，下面来说一下上拉加载js里面的思路

6.1：首先写一个函数来封装上拉加载的代码，为了就是在别的地方用到的时候直接调用，比较方便

6:3：请求数据成功，调用.then这个方法，下面开始判断，如果请求到的不是第一页的数据，就让他拼接，等加载完成，请求到第二页的数据以后让他拼接，通过concat这个关键字，开关打开，否则让他显示第一页的数据

7.下一步判断，如果请求的数据长度等于0的话，说明已经没有数据啦，让noMore等于false，显示没有数据啦

8.接口请求失败或者没有网络，请求超时的话，调用catah这个方法，让loadingFailed: true，显示加载失败

微信小程序上拉加载流程相关推荐

最新文章

热门文章