微信小程序如何做触底加载分页功能

分页分为两种，一种是一次性将后台数据请求过来，再对这些数据进行分页，第二种就是一次请求几条数据，分批次请求，一般情况下是推荐第二种，因为第一种很容易造成服务器的卡顿

以列表页为例，一页十条，触底则加载下一页
大概思路就是将你每次要请求多少条数据传到后台接口，后台会返回你请求的这几条数据，在用户下拉一次时再去请求一次接口，每请求一次，当前页数+1，将接口返回的数据 concat( ) 拼接，存放在需要循环的数组对象中

         //isPage表示是否分页请求//getOrganizationLists是你自定义命名的方法名称//async 表示这个方法是异步的async getOrganizationLists(isPage) {var that = thisif (isPage) {//如果分页就把当前页数加1  page表示当前页数this.setData({page:this.data.page + 1})} else {//如果不是分页加载 默认请求第一页的数据 //这时候用来循环列表的数组storesList重置为[] //status表示当前加载分页的状态 为loadmore时显示加载更多this.setData({page:1,storesList:[],status:'loadmore'})}//自定义一个临时变量，存放当前的列表数据var storesList = this.data.storesList;//this.$api是封装的一个请求方法，//organizationLists是请求接口方法名称this.$api.organizationLists({//传当前页数给接口，告诉接口当前请求的第几页page: this.data.page,}, function(res) {//这里两个数组相加，接口返回的数组加上当前请求到的数组数据storesList = storesList.concat(res.data.list.data)//赋值到data中的变量that.setData({storesList:storesList })//当前的请求的页数已经大于等于接口返回的最后一页页数了if (that.data.page >= res.data.last_page) {//nomore表示没有更多了that.data.status = 'nomore'}})},

        //生命周期内调用//页面加载的时候调用方法，进入页面默认请求第一页onLoad() {this.getOrganizationLists();},//当前页面拉到底部  调用分页加载方法onReachBottom() {//如果不是请求到了最后一页，才加载分页方法if(this.data.status!='nomore'){this.getOrganizationLists(true)}},

<!-- 在wxml中循环这个storesList变量 -->
<view v-for="(item,index) in list" :key="cindex" class="dis-flex nearby-stores-item flex-x-between">
</view>

微信小程序如何做触底加载分页功能相关推荐

微信小程序中高清图片替换加载策略
微信小程序中高清图片替换加载策略前言一.基本思想二.具体步骤 1.图片大小对比 2.代码流程总结前言随着微信的不断发展,微信小程序凭借着它用户基数大,无下载安装等优点开始逐渐替代传统app ...
页面加载成功后调用_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
mfc cimage加载显示图片_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
微信小程序如何实现上拉加载更多数据?
思路:在下拉到页面的时候我们可以进行数据请求,请求到在上次加载完毕的后五条数据 (举个例子),通过page(页码),count(加载数据得条数)与start进行联接,我们可以发现:start:(pag ...
微信小程序入门五上滑加载下拉刷新
之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介绍加载和刷新. 效果图: 先介绍在IDE中,怎么模拟上滑这个操作.开始我是用鼠标点击文章列表,然后先上移动.结果一直没有结果,以为是 ...
微信小程序云数据库触底分页加载，下拉无限加载，第一次请求数据随机，随机获取数据库的数据
效果图小程序云开发分页加载代码  <view class="pageTitle">家 ...
微信小程序滚动Tab选项卡：左右滑动切换、触底加载分页
文章目录效果图一.顶部标签栏二.列表内容部分 swiper组件高度及上下滚动样式三.数据结构及赋值方法四.scroll组件触底事件(分页相关五.scroll组件的高度样式 swiper组件 ...
微信小程序上拉触底案例添加loading效果
在上拉触底的时候如何添加小程序的loading效果呢??就是左边现实的效果.有一个转动的圈圈首先我们打开.js文件在原有的请求颜色的基础上添加wx.showLoading getColors(){ ...
【微信小程序】实现上拉加载更多
小程序上拉加载更多首先我们得运用到小程序的往下拉触底事件,如下图所示代码量很少,方便理解,主要还是要有逻辑,也不说废话了直接上代码吧 data: {paging:5//显示几条内容}onReach ...
微信小程序 - 空数据、网络加载失败组件
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类小程序码效果图: ##使用说明 1. usingComponents 添加"EmptyV ...

微信小程序如何做触底加载分页功能

微信小程序如何做触底加载分页功能

分页分为两种，一种是一次性将后台数据请求过来，再对这些数据进行分页，第二种就是一次请求几条数据，分批次请求，一般情况下是推荐第二种，因为第一种很容易造成服务器的卡顿

微信小程序如何做触底加载分页功能相关推荐

最新文章

热门文章