精选文章 【微信小程序】实现分页加载

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

作者:叶落无痕123 时间: 2020-08-05 07:24:31
叶落无痕123 2020-08-05 07:24:31

一、效果

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

已加载全部.png

二、步骤

1. wxml中

 

正在载入更多...  
已加载全部

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)
        })
      }

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:不停机还能替换代码?6年的 Java程序员表示不可思议

下一篇:源码包管理 任务计划——at cron

您可能感兴趣

  • IntellIJ IDEA2020新功能

    一、java 1、Java 14支持:记录和模式匹配 IntelliJ IDEA 2020.1添加了对Java 14及其新功能的支持。IDE不仅添加了对Records的完整代码洞察支持,而且还使您能够快速创建新记录并生成其构造函数和组件,并警告存在的错误。您还将发现对instanceof运算符的模式匹配的支持,包括新的检查和快速修复,该快速修复通过用新的简洁模式变量替换它们来快速简化冗长的i...

  • 二本学历,五年抄代码经验,疫情期被裁,三个月25K入职字节跳动

    前言 我的个人背景非常简单,也可以说丝毫没有亮点。 学历普通,计算机专业二本毕业,毕业后出来就一直在一家小公司,岁月如梭细,算了下至今从事Java开发已经5年了,也crud了五年,每天就是抄代码,毫无新意,甚至一度的怀疑人生。 其实很久之前就已经对自己不满了,每次都在想鼓起勇气想去打破困境,去改变自己,然而因为游戏因为玩耍一次又一次的破功;直到这次疫情,强有力的给了我当头一棒。是的,我失业了...

  • 前端路 - Webpack

    概述 本质 JavaScript 应用程序的静态模块打包器 核心 加载器(Loader)机制 工作流程 配置初始化 webpack 会首先读取配置文件,执行默认配置 编译前准备 webpack 会实例化 compiler,注册 plugins、resolverFactory、hooks。 reslove 前准备 webpack 实例化 compilation、NormalModuleFact...

  • 浅层砂过滤器(浅层介质过滤器)介绍及现场案例反馈图(多图)

    浅层砂过滤器(浅层介质过滤器)是由多个标准高速砂缸单元组成,其内部设有D特的布水器和集水器,拥有的双向自动冲洗阀,可实现在正常系统运行中多个标准高速砂缸逐个单独的反冲洗,全自动程序控制。具有反冲洗用水量小,设备安装方便,易于操作等优点。该设备流量大,无需维护。根据不同的用户要求,有立式和卧式两个系列。适用于工业和民用循环水系统的水质处理。 【浅层砂过滤器(浅层介质过滤器)工作原理】 浅层砂过...

  • Java异常面试题(2020最新版)

    文章目录 Java异常架构与异常关键字 Java异常简介 Java异常架构 1. Throwable 2. Error(错误) 3. Exception(异常) 运行时异常 编译时异常 4. 受检异常与非受检异常 受检异常 非受检异常 Java异常关键字 Java异常处理 声明异常 抛出异常 捕获异常 如何选择异常类型 常见异常处理方式 直接抛出异常 封装异常再抛出 捕获异常 自定义异常 t...

  • Webview.apk —— Google 官方的私有插件化方案

    简介: 在 Android 跨入 5.0 版本之后,我们在使用 Android 手机的过程中,可能会发现一个奇特的现象,就是手机里的 WebView 是可以在应用商店升级,而不需要跟随系统. 在 Android 跨入 5.0 版本之后,我们在使用 Android 手机的过程中,可能会发现一个奇特的现象,就是手机里的 WebView 是可以在应用商店升级,而不需要跟随系统的。 这一点在 iOS...

  • 大型架构及配置技术ansible(一)之ansible基础,ad-hoc,批量配置管理,ansible七种武器,JSON简介,YAML简介

    一、ansible基础 6台虚拟机(2cpu,1.5G以上内存,10G以上硬盘,1块网卡) 主机名 IP地址 角色 ansible40 192.168.4.40/24 管理主机 web41 192.168.4.41/24 托管主机 web42 192.168.4.42/24 托管主机 db43 192.168.4.43/24 托管主机 db44 192.168.4.44/24 托管主机 ca...

  • 前端实习生面试题分析(一)

    最近面试拿了很多公司的实习offer,只要是面试的都通过了。 接下来就分析下面试题,也能给自己一个提升吧,以便后续的面试更轻车熟路些,题目没什么顺序,想起什么写什么,还有我面试过程中的一些小套路。 估计要写好多,每天写几道题,而且有些经验性的东西也不容易写出来 这篇写的都是类似一些概念性的理论东西。 1.JS防抖和节流 先说为什么要做防抖和节流,针对一些会频繁触发的事件,像scroll、re...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。