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

栏目: Java · 发布时间: 6年前

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

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

回顾下 page的生命周期

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

「小程序 <a href='https://www.codercto.com/topics/22013.html'>JAVA</a> 实战」小程序页面的上拉下拉刷新(49)

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

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

  1. onReachBottom 上拉刷新
  2. onPullDownRefresh 下拉刷新

* 需要在 app.json window 选项中或 页面配置 中开启 enablePullDownRefresh

* 可以通过 wx.startPullDownRefresh 触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

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

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

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

}


})

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

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

百度未收录

>>原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!

>>原文链接地址:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Rationality for Mortals

Rationality for Mortals

Gerd Gigerenzer / Oxford University Press, USA / 2008-05-02 / USD 65.00

Gerd Gigerenzer's influential work examines the rationality of individuals not from the perspective of logic or probability, but from the point of view of adaptation to the real world of human behavio......一起来看看 《Rationality for Mortals》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码