zoukankan      html  css  js  c++  java
  • 微信小程序 下拉刷新 上拉加载

    1.下拉刷新

     小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。

    1. 需要在 .json 文件中配置。 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是对应的页面,可以下拉刷新。

    具体页面的.json文件:

    1 {
    2  "enablePullDownRefresh": true
    3 }

    app.json文件:

    1 "window": {
    2  "enablePullDownRefresh": true
    3  }

    2. 在js文件中添加回调函数

    // 下拉刷新回调接口
    onPullDownRefresh: function () {
     // do somthing
    },

    3. 添加数据

    通常情况下的下拉刷新操作,就是把查询条件重置,让页面显示最新的一页数据。下面是笔者demo中的下拉刷新回调接口的代码,同时也是一般情况下的操作流程。

     1 // 下拉刷新回调接口
     2 onPullDownRefresh: function () {
     3  // 我们用total和count来控制分页,total代表已请求数据的总数,count代表每次请求的个数。
     4  // 刷新时需把total重置为0,代表重新从第一条请求。
     5  total = 0; 
     6  // this.data.dataArray 是页面中绑定的数据源
     7  this.data.dataArray = [];
     8  // 网络请求,重新请求一遍数据
     9  this.periphery();
    10  // 小程序提供的api,通知页面停止下拉刷新效果
    11  wx.stopPullDownRefresh;
    12 },

    2 .上拉加载

    同下拉刷新一样,小程序中也提供了用于上拉时回调的接口。官方文档中并没有很详细的介绍,经测试发现,上拉回调的接口并不需要额外的配置(下拉时需要在 .json文件中配置 "enablePullDownRefresh": true),直接在页面滑动到底部时就能拿到回调。

    1. 在js文件中添加回调函数

    1 // 上拉加载回调接口
    2 onReachBottom: function () {
    3  // 我们用total和count来控制分页,total代表已请求数据的总数,count代表每次请求的个数。
    4  // 上拉时需把total在原来的基础上加上count,代表从count条后的数据开始请求。
    5  total += count;
    6  // 网络请求
    7  this.periphery();
    8 },
  • 相关阅读:
    Java学习——文件和IO流
    Java多线程——ThreadLocal类的原理和使用
    Java多线程——线程八锁案例分析
    Django 模版语法 一
    Django 命令行调用模版渲染
    Django 使用 locals() 函数
    Django 加载 app 中的urls
    Django 传递额外参数及 URL别名
    Django 无名参数与有名参数
    Django 项目中添加静态文件夹
  • 原文地址:https://www.cnblogs.com/tpfOfBlog/p/6438858.html
Copyright © 2011-2022 走看看