专栏首页编程坑太多「小程序JAVA实战」小程序页面的上拉下拉刷新(50)

「小程序JAVA实战」小程序页面的上拉下拉刷新(50)

之前已经完成了小程序的列表展示,但是对于上拉和下拉刷新这个功能,其实跟小程序的生命周期有关系,一起回顾下完成,上拉和下拉刷新。源码:https://github.com/limingios/wxProgram.git 中wx-springboot 和 No.15

回顾下 page的生命周期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

列表小程序端完成 上拉,下拉刷新功能

  1. onReachBottom 上拉刷新

必须列表已经铺满屏幕这个方法才有用。

  1. onPullDownRefresh 下拉刷新
  • 需要在 app.jsonwindow选项中或页面配置中开启 enablePullDownRefresh
  • 可以通过 wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
  • 当处理完数据刷新后, wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
const app = getApp()

Page({
  data: {
    // 用于分页的属性
    totalPage: 1,
    page: 1,
    videoList: [],
    screenWidth: 350,
    serverUrl: "",
  },

  onLoad: function (params) {
    var me = this;
    var screenWidth = wx.getSystemInfoSync().screenWidth;
    me.setData({
      screenWidth: screenWidth,
    });



    // 获取当前的分页数
    var page = me.data.page;
    me.getAllVideosList(page);
  },

  getAllVideosList:function(page){
    var me = this;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '请等待,加载中...',
    });


    wx.request({
      url: serverUrl + '/video/showAll?page=' + page,
      method: "POST",
      success: function (res) {
        wx.hideLoading();
        wx.hideNavigationBarLoading();
        wx.stopPullDownRefresh();

        console.log(res.data);

        // 判断当前页page是否是第一页,如果是第一页,那么设置videoList为空
        if (page === 1) {
          me.setData({
            videoList: []
          });
        }

        var videoList = res.data.data.rows;
        var newVideoList = me.data.videoList;

        me.setData({
          videoList: newVideoList.concat(videoList),
          page: page,
          totalPage: res.data.data.total,
          serverUrl: serverUrl
        });

      }
    })
  },

  onPullDownRefresh: function (params) {
    var me = this;
    wx.showNavigationBarLoading();
    me.getAllVideosList(1);

  },

  onReachBottom: function (params){
    var me = this;
    var currentPage = me.data.page;
    var totalPage = me.data.totalPage;

    //判断当前页数和总页数是否相等,如果相同已经无需请求
    if (currentPage == totalPage){
      wx.showToast({
        title: '已经没有视频啦~',
        icon:"none"
      })
      return;
    }
    var page = currentPage+1;
    me.getAllVideosList(page);

}


})

PS:上拉刷新不需要做任何的配置,下拉刷新需要开启配置,每次请求建议开启 wx.showNavigationBarLoading() 和 wx.hideNavigationBarLoading(); 配合使用。

本文分享自微信公众号 - 编程坑太多(idig88)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「小程序JAVA实战」小程序视频列表到详情功能(58)

    PS: 页面的跳转传值在html和jsp开发中也比较普遍,千万不要有老铁通过缓存的方式传值,可以是可以但是不清晰了。

    IT故事会
  • Javascript 未结束的字符串常量

    IT故事会
  • 「小程序JAVA实战」 小程序私有页面的生命周期以及导航(10)

    PS:这块主要是对配置的生命周期的熟悉,了解下redirectTo 和 navigateTo 之前的区别。

    IT故事会
  • DMN:大脑的默认网络

    这篇文章综述由世界著名的脑成像专家Marcus E.Raichle教授撰写,Raichle 教授来自圣路易斯华盛顿大学(Washington Univers...

    用户1279583
  • 图解人脸识别算法facenet系列(一)

    代码地址:https://github.com/davidsandberg/facenet

    算法发
  • R中字段抽取、字段合并、字段匹配

    1、字段抽取 字段抽取,是根据已知列数据的开始和结束位置,抽取出新的列 字段截取函数:substr(x,start,stop) tel <- '1892225...

    Erin
  • Python 进阶(七): Word 基本操作

    Word 是一个十分常用的文字处理工具,通常我们都是手动来操作它,本节我们来看一下如何通过 Python 来操作。

    Python小二
  • idea代码简化神器:Lombok

    相信大家都有这样的经历,编写完一个实体类后,为这个实体类的每个属性添加setter和getter,当给类增加一个属性时,又要去给这个属性添加sett...

    小诸葛
  • R︱Yandex的梯度提升CatBoost 算法(官方述:超越XGBoost/lightGBM/h2o)

    俄罗斯搜索巨头 Yandex 昨日宣布开源 CatBoost ,这是一种支持类别特征,基于梯度提升决策树的机器学习方法。 CatBoost 是由 Yand...

    素质
  • 手把手教你训练一个神经网络,打爆21点!

    21点又名黑杰克(Blackjack),起源于法国,已流传到世界各地,有着悠久的历史。

    大数据文摘

扫码关注云+社区

领取腾讯云代金券