【微信小程序】实现分页加载

一、效果

已加载全部.png

二、步骤

1. wxml中

<view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view>
<view class="loading" hidden="{{!searchLoadingComplete}}">已加载全部</view>

2. wxss中

.loading{  padding: 10rpx;  font-size: 26rpx;color:#666;text-align: center;
}

3. json文件中，开启下拉刷新

{"usingComponents": {},"navigationBarTitleText": "日常管理","enablePullDownRefresh": true
}

4. js中

①添加这几个变量

data: {pageNo: 1, // 设置加载的第几次，默认是第一次  pageSize: 10, //返回数据的个数  searchLoading: false, //"上拉加载"的变量，默认false，隐藏  searchLoadingComplete: false //“没有数据”的变量，默认false，隐藏  },

②加载数据方式用下拉的方式

/*** 生命周期函数--监听页面加载*/onLoad: function(options) {wx.startPullDownRefresh();},

③相关函数处理

/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {this.setData({pageNo: 1,storelist:[],searchLoading: true, //"上拉加载"的变量，默认false，隐藏  searchLoadingComplete: false //“没有数据”的变量，默认false，隐藏  })this.getShopList();},

  /*** 页面上拉触底事件的处理函数*/onReachBottom: function() {if (!this.data.searchLoadingComplete){var currentPageNo = this.data.pageNo;this.setData({pageNo: currentPageNo + 1,})this.getShopList();}},

④请求参数中加入

'pageNo': _this.data.pageNo,
'pageSize': _this.data.pageSize,

⑤请求成功处理回调

function(result) {if (_this.data.pageNo==1){wx.stopPullDownRefresh();//下拉刷新收起来}console.log('success', result.retailList);if (result.retailList.length<_this.data.pageSize){//小于个数，表示没有更多了_this.setData({searchLoading: false,searchLoadingComplete :true})}_this.setData({storelist: _this.data.storelist.concat(result.retailList)})}

【微信小程序】实现分页加载相关推荐

微信小程序php分页加载,微信小程序分页加载
分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序 ...
微信小程序-如何分页加载数据
小程序通过数据库读取数据一次最多读取20条,云函数一次最多读取100条,所以如果我们要读取更多的数据就要借助分页加载,通过分次的加载数据,然后将每次获取到的数据拼接起来,就可以在页面显示更多的数据. ...
微信小程序 - ListView3 - 分页加载
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类小程序码效果图: js 代码: var index = 0; Page({/*** 页面的初始数据 ...
微信小程序实现分页加载数据
实现分页加载数据要用到页面加载触底事件 onReachBottom: function () { } 首先在 js 定义初始数据 data: { //用来接收后端数据list:[], //当前页cur ...
微信小程序实现分页加载，触底加载下一页，滚动加载
这里我就不写wxml了,就是一个列表循环,直接看js代码逻辑,注释都写在代码后面了,这个方法可以实现无限滚动加载,直到加载完最后一条数据,也可以实现触底没数据后,二次触底可以从新加载刷新,学废了就给个 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新微信小程序下拉加载和上拉刷新两种实现方法方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里 ...
Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈绘制底部圆形及 ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {

【微信小程序】实现分页加载

一、效果

二、步骤

【微信小程序】实现分页加载相关推荐

最新文章

热门文章