• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxuyemiandeshanglaxialashuaxin49/

之前已经完成了小程序的列表展示,但是对于上拉和下拉刷新这个功能,其实跟小程序的生命周期有关系,一起回顾下完成,上拉和下拉刷新。源码: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 上拉刷新
  2. 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(); 配合使用。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序上拉下拉刷新发布时间:2022-07-18
下一篇:
微信小程序单独页面刷新下拉发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap