美文网首页
微信小程序--下拉刷新/上拉加载更多

微信小程序--下拉刷新/上拉加载更多

作者: 七號7777 | 来源:发表于2019-10-28 17:31 被阅读0次

    参考文档:https://blog.csdn.net/ruffaim/article/details/78839214

    在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;

    json文件:

    "window": {
        "enablePullDownRefresh": true  // 这里的true是布尔型而不是字符
      },
    
    // 下拉刷新
      onPullDownRefresh: function () {
        // 显示顶部刷新图标
        wx.showNavigationBarLoading();
        var that = this;
        wx.request({
          url: 'https://xxx/?page=0',
          method: "GET",
          header: {
            'content-type': 'application/text'
          },
          success: function (res) {
            console.log(that.data.moment);
            // 隐藏导航栏加载框
            wx.hideNavigationBarLoading();
            // 停止下拉动作
            wx.stopPullDownRefresh();
          }
        })
      },
    
    // 关闭下拉刷新
      onPullDownRefresh: function() {
        wx.stopPullDownRefresh();
      },
    
    /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        var that = this;
        // 显示加载图标
        wx.showLoading({
          title: '玩命加载中',
        })
        // 页数+1
        page = page + 1;
        wx.request({
          url: 'https://xxx/?page=' + page,
          method: "GET",
          // 请求头部
          header: {
            'content-type': 'application/text'
          },
          success: function (res) {
            // 回调函数--成功
            // 隐藏加载框
            wx.hideLoading();
          }
        })
      },
    

    相关文章

      网友评论

          本文标题:微信小程序--下拉刷新/上拉加载更多

          本文链接:https://www.haomeiwen.com/subject/krpiyctx.html