小程序做得多了,有些常用功能就有必要记录一下

请看详解:

微信小程序之下拉触底时加载下一页

wxml参考:

      <scroll-view class='dataContainer' scroll-y bindscrolltolower="nextDataPage">

            <block wx:for="{{userList}}" wx:key="index">
<text>这是一条数据:{{item.data}}</text>
</block> <view class='bottomline' wx:if="{{userList.length > 0}}" >{{isLastPage?"没有更多数据了":"加载中..."}}</view>
<view class='bottomline' wx:if="{{userList.length == 0}}" >暂时没有数据</view> </scroll-view>

js参考:

data: {
page:1,
rows:20,
isLastPage:false,
isLoadInterface: false,
userList:[]
},
//查询数据列表
searchDataList:function(pageNum){
let that = this;
let pageIndex = pageNum;
util.ajax({
url: '接口地址',
method: "POST",
data: {
"page": pageIndex,
"rows":that.data.rows
},
success: function (res) { that.setData({
isLastPage:res.data.islast,
page: pageIndex,
isLoadInterface: false
}) if(res.data.list != undefined){
if (pageIndex > 1){
var listBefore = that.data.userList;
var currentList = res.data.list;
that.setData({
userList:listBefore.concat(currentList)
})
}else{
that.setData({
userList: res.data.list
})
}
} }, complete(e) {
that.setData({
isShowLoadPage: false
})
}
}) },
// 加载下一页数据
nextDataPage: function () {
let that = this; let islastVar = that.data.isLastPage; if (!that.data.isLoadInterface) {
if (!islastVar) {
//防止在接口未执行完再次调用接口
that.setData({
isLoadInterface: true
}) let page = that.data.page * 1 + 1; that.searchDataList(page); }
} },
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { var that = this; let page = that.data.page;
that.searchDataList(page); }

思路:以小程序标签scroll-view作为列表容器,容器方法bindscrolltolower来触发下一页加载

     页面onload后执行第一页,非第一页的数据用concat方法拼接之前的数据

   防止接口未执行完反复触发bindscrolltolower里的方法,用一个变量isLoadInterface来截断

   接口的数据中应有islast这类是否最后一页的参数,用来判断是否加载全部数据

微信小程序下拉加载下一页的更多相关文章

  1. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  2. 微信小程序 - 上拉加载下拉刷新

    点击下载示例:小程序 - 上拉刷新下拉加载

  3. 微信小程序之下拉加载和上拉刷新

    微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性       ...

  4. 微信小程序上拉加载:onReachBottom详解+设置触发距离

    前端经常遇到上拉加载更多的需求,一般还涉及到翻页.小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多,有需要的直接看代码,有详细注释: 1.首 ...

  5. 微信小程序之上拉加载更多

    loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...

  6. 微信小程序 - 上拉加载

    demo.wxml  文件 <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'& ...

  7. 微信小程序~上拉加载onReachBottom

    代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ tit ...

  8. 微信小程序上拉加载——分页

    wxml: <view class="page"> <scroll-view class="imageViewCss_1" scroll-y= ...

  9. 微信小程序 - 上拉加载更多组件

    详情用例看demo,点击下载示例:loadmore

随机推荐

  1. DWVA-命令注入漏洞闯关(Command Injection)

    前言 Vulnerability: Command Injection LOW级别 代码: <?php if( isset( $_POST[ 'Submit' ] ) ) { // 几首一个变量 ...

  2. PHP核心配置基础解读

    PHP核心配置 原为引用 <代码审计企业级web代码安全架构>尹毅  第一章内容 Register_globals(全局变量开关) 会直接把用户GET.POST等方式提交上来的参数注册成为 ...

  3. 新鲜出炉!阿里巴巴,京东,美团面经汇总,已拿offer!

    最近在后台收到了很多小伙伴的私信,说自己最近想好好准备一下,在不久后的秋招跳个槽往大厂冲击一下,想要我给大家整理出一份大厂面试题好用来做好准备.之前公司有点事比较忙就没回私信.最近好一点了我也是立马联 ...

  4. .NET 5 ORM 八大实用技巧 干货 - SqlSugar ORM

    介绍 sqlsugar已经在第一时间完美兼容.NET5并且已经有人在使用了, 很多人都担心用了开源框架遇到问题无法解决,导致前功尽弃,使用SqlSugar你大可放心,除了有详细文档和几年的大量用户积累 ...

  5. ABBYY FineReader 14创建PDF文档功能解析

    使用ABBYY FineReader,您可以轻松查看和编辑任何类型的 PDF,真的是一款实至名归的PDF编辑转换器,您知道的,它能够保护.签署和编辑PDF文档,甚至还可以创建PDF文档,本文和小编一起 ...

  6. 如何用ABBYY FineReader提取图片中的文字

    作为OCR文字识别软件中的佼佼者,可能大家对于ABBYY FineReader的使用还不熟练,没关系,今天小编就为大家演示,如何用ABBYY FineReader这款文字识别软件,将一张截图中的文字识 ...

  7. Java8常用的内置函数式接口(一)Predicate、Consumer、Supplier、Function

    Java8常用的内置函数式接口(一) 简介 JDK 1.8 API中包含了很多内置的函数式接口.有些是在以前版本的Java中大家耳熟能详的,例如Comparator接口,或者Runnable接口.对这 ...

  8. 【VUE】5.路由导航守卫

    1. 功能需求 1. 当用户登陆成功后,把得到的token存到Session Storage 2. components -> Form.vue , 对预验证进行校验,如果验证不正确就跳出,如果 ...

  9. mac搭建mnmp环境

    brew安装nginx brew install nginx 安装php56 brew tap homebrew/dupes brew tap josegonzalez/homebrew-php br ...

  10. 开始使用 java8 的日期工具类

    例如,现有的类(例如java.util.Date和SimpleDateFormatter)不是线程安全的,这会导致用户潜在的并发问题.而新的LocalDate.LocalDateTime.DateTi ...