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

转载

mb5ff40afd04638 2019-01-24 01:26:00

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

回顾下 page的生命周期

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

「小程序JAVA实战」小程序页面的上拉下拉刷新（50）_上拉

「小程序JAVA实战」小程序页面的上拉下拉刷新（50）_ide_02

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

onReachBottom 上拉刷新
onPullDownRefresh 下拉刷新

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

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

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

「小程序JAVA实战」小程序页面的上拉下拉刷新（50）_当前页_03

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

}


})