zoukankan      html  css  js  c++  java
  • 18.小程序上拉加载和下拉刷新

    在微信小程序上实现下拉刷新、上拉加载的效果

    使用系统提供的onPullDownRefresh、onReachBottom这2个事件,

    前提需要在app.json或page.json配置文件中设置,才能使用。

    app.json是全应用的页面都可以使用该事件,page.json则只是对应的页面才可以使用。

    示例:

    app.json:

    在app.json文件里设置window属性

    page.json:

    在page.json文件里直接设置属性 

    示例:

    结合导航栏loading显示正在加载的效果

    Page({  

      data: {  

        pageNum: 1,       // 设置加载的第几次,默认是第一次  

        isFirstLoad: true,   // 用于判断List数组是不是空数组,默认true,空的数组  

        hasMore: false,    // “加载更多”  

      },  

      // 下拉刷新  

      onPullDownRefresh: function () {  

        // 显示导航栏loading  

        wx.showNavigationBarLoading();  

        // 调用接口加载数据  

        this.loadData();  

        // 隐藏导航栏loading  

        wx.hideNavigationBarLoading();  

        // 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新  

        wx.stopPullDownRefresh();  

      },  

      // 上拉加载  

      onReachBottom(e) {  

        let that = this;  

        if (that.data.hasMore) {  

          that.setData({  

            pageNum: that.data.pageNum + 1,  // 每次触发上拉事件,把pageNum+1  

            isFirstLoad: false                // 触发到上拉事件,把isFirstLoad设为为false  

          });  

          that.loadData();  

        }  

      },  

    })  

     

  • 相关阅读:
    navicat连接虚拟机中mysql"Access denied for user'root'@'IP地址'"问题
    Centos6.4 + mysql-5.6.38-linux-glibc2.12-x86_64.tar 实现mysql主从复制
    三、mock测试技术
    二、数据加密
    一.unittest框架初识
    3.Allure报告
    2.pytest参数化
    1.pytest框架初识
    RabbitMQ 几种工作模式---(三) Publish/Subscribe
    RabbitMQ 几种工作模式---(二)work
  • 原文地址:https://www.cnblogs.com/kai-z/p/8513542.html
Copyright © 2011-2022 走看看