小程序上拉加载和下拉刷新的思路

小程序刷新.gif

这是七月老师留的作业（功能比较简陋，有问题欢迎指出），在做这个事情之前，我创建了封装网络请求shopList模型类和UI显示的load组件。
shopList 模型类

image.png

class ShopList {

    //false：网络闲置，true：被占用
    static isRequest = false;
    //页数
    static page = 1;
   //下拉刷新
    refreshTopPull(reSuccess, reFail) {
        ShopList.page = 1
        wx.showNavigationBarLoading({
            success: (res) => {
                debugger
            },
        })

        setTimeout(() => {
            wx.hideNavigationBarLoading({
                success: (res) => {
                    reSuccess()
                },
                fail: (res) => {
                    reFail()
                }
            })

        }, 2000);
    }
//上拉加载 list:数据，reLoading返回加载状态，reSuccess：成功，reFail：失败
    refreshBottomPull(list,reLoading,reSuccess, reFail) {
        //上拉加载 
        //reLoading: -1初始状态 0正在加载，1加载完毕，2暂无数据
        if(ShopList.page >= 3){
            //没有更多数据（做个假的没有更多数据）
            reLoading(2)
            return
        }
        //判断请求是否占用
        if(ShopList.isRequest){
            return
        }
        reLoading(0)
        //正在加载
        ShopList.isRequest = true
        setTimeout(() => {
            //已经加载完毕
            reLoading(1)            
            setTimeout(() => {
                ShopList.isRequest = false
                ShopList.page +=1
                reLoading(-1)
                var dataList = list.concat(list)
                reSuccess(dataList)
            }, 1000);
        }, 2000);
    }
}
export {
    ShopList
}

加载自定义组件

image.png

wxml代码

<view class="contain">
  <text class="title" wx:if="{{isState==0}}">正在加载</text>
  <text class="title" wx:if="{{isState==1}}">加载完毕</text>
  <text class="title" wx:if="{{isState==2}}">没有更多数据</text>
</view>

最后是核心实现代码

JS

onLoad: function () {
     shopOB = new ShopList()
    wx.lin.renderWaterFlow(this.data.demo, false, () => {
      console.log('渲染成功')
    })
  },

  onPullDownRefresh: function () {
    // 触发下拉刷新时执行
    //下拉刷新
    shopOB.refreshTopPull(
      reSuccess => {
        //下拉刷新成功
        wx.lin.renderWaterFlow(this.data.demo, true, () => {
          console.log('渲染成功')
        })

      },
      reFail => {
        //下拉失败
      },
    )
  },


  onReachBottom: function () {
    // 页面触底时执行，上拉加载
    shopOB.refreshBottomPull(this.data.demo,
      reLoading =>{
        //加载状态
        this.setData({
          isState:reLoading
        })
      },
      reSuccess => {
        //加载成功
        wx.lin.renderWaterFlow(reSuccess, false, () => {
          // console.log('渲染成功')
        })
      },
      reFail => {
        //加载失败
      },
    )
  },

WXML

<water-flow id="myComponent" generic:l-water-flow-item="l-demo" column-gap="20rpx"/>
<loading-demo isState="{{isState}}"></loading-demo>

JSON

{
  "component": true,
  "enablePullDownRefresh":true,
  "usingComponents": {
    "l-demo":"../l-demo/l-demo",
    "water-flow":"../../miniprogram_npm/lin-ui/water-flow",
    "loading-demo":"../template/load"
  }
}

1.下拉刷新

我的思路
下拉刷新触发系统方法onPullDownRefresh =》模型中refreshTopPull =》数据请求成功和刷新UI、停止刷新动画

2.上拉

我的思路
上拉加载触发系统方法onReachBottom =》模型中refreshBottomPull =》数据正在加载 =》数据请求成功或者暂无数据 =》刷新UI
下面有几个注意点

1. 底部加载显示封装了load组件，方便其他地方使用。

2. ShopList模型中的reLoading有几种状态: 0正在加载，1加载完毕，2暂无数据，通过isState字段来改变页面的状态。

3. 模型ShopList 中的isRequest：false和true，来判断请求是否占用，如果占用的话return返回，不执行下面的代码。

4. 模型ShopList 中refreshBottomPull方法中的 ShopList.page >= 3，是为了大于3页，做一个假的没有更多数据显示。