前言

公司最近有个项目，需要做上拉加载更多的功能，大家都知道，小程序本身是没有提供上拉加载更多这个组件的，所以这个需要我们自己来实现，本来自己是打算根据onReachBottom自己做一个的，但是本着不重复造轮子(懒。。。)的态度，决定先看看有没有已经做好的，结果还真发现一个！

实现

话不多说，先上一个gif图给大家看看效果

效果大家都看见了，接下来我们看看具体是怎么实现的吧。

<view class="loadmore" hidden='{{!showThis}}' bindtap='clickLoadMore'>
    <image class="icon {{showIcon?'active':''}}" src='../../img/loading.png' hidden='{{!showIcon}}'/>
    <text>{{text}}</text>
</view>

wxml文件里面很简单，由一个image和一个text组成。通过showThis决定是否显示该组件，根据showIcon决定是否显示图片，功能还是比较齐全的，wxml看完了，接下来看看js文件。

Component({
  // 组件的属性列表
  properties: {
      // 判断是否还有更多数据
      hasMore: {
        type: Boolean,
        value: false
      },
      // 加载中的显示文本
      loadingText: {
        type: String,
        value: '加载中...'
      },
      // 加载失败的显示文本
      failText: {
        type: String,
        value: '加载失败, 请点击重试!'
      },
      // 没有更多后的显示文本, 默认没有则隐藏加载更多控件
      finishText: {
        type: String,
        value: ''
      },
      // 列表渲染延时, 默认为 500 ms, 我在开发工具中测试列表渲染速度时快时慢, 可根据实际使用中界面复杂度自行调整
      // ps 如果能监听setData() 渲染结束的话则可以不需要延时 
      listRenderingDelay: {
        type: Number,
        value: 500
      }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showThis: false,
    text: '',
    showIcon: false,
    isLoading: false
  },

  /**
   * 组件的方法列表
   */
  methods: {

    //加载更多的入口方法, 直接在page中使用时请在onReachBottom() 方法中调用这个方法, 并实现loadMoreListener方法去获取数据
    loadMore: function() {
      console.log('properties', this.properties)
      if(!this.properties.hasMore){
        console.log('load more finish')
        return
      }
      if(this.data.isLoading) {
        console.log('loading ...')
        return
      }
      this.setData({
        isLoading: true
      })
      this.triggerEvent('loadMoreListener')
    },
    //加载完成, 传入hasMore 
    loadMoreComplete: function(data) {
        var hasMore = data.curPage < data.pageCount && data.pageCount != 1
        var text = '', showThis = false, showIcon = false

        if (hasMore) {
          showIcon = true
          showThis = true
          text = this.properties.loadingText
        } else if (this.properties.finishText.length>0) {
          text = this.properties.finishText
          showThis = true
        }
        this.setData({
          hasMore: hasMore,
          text: text,
          showIcon: showIcon,
          showThis: showThis
        })
        //界面渲染延迟, 避免列表还未渲染完成就再次触发 loadMore 方法
        setTimeout(function(){
          this.setData({
            isLoading: false
          })
        }.bind(this), this.properties.listRenderingDelay)
    },
    // 加载失败
    loadMoreFail: function() {
      this.setData({
        showIcon: false,
        text: this.properties.failText
      })

      //界面渲染延迟, 避免列表还未渲染完成就再次触发 loadMore 方法
      setTimeout(function(){
        this.setData({
          isLoading: false
        })
      }.bind(this), this.properties.listRenderingDelay)
    },
    //点击 loadmore 控件时触发, 只有加载失败时才会进入页面回调方法
    clickLoadMore: function() {
      if(this.data.text != this.properties.failText) return
      this.setData({
        showIcon: true,
        text: this.properties.loadingText,
        isLoading: true
      })
      this.triggerEvent('clickLoadMore')
    }
  }
})

大家也都看到了，该组件对外暴露了loadMore,loadMoreComplete,loadMoreFail,clickLoadMore四个方法。

• loadMore 在page中的onReachBottom() 方法中调用该方法, 并实现loadMoreListener方法去获取数据

• loadMoreComplete 加载完成, 传入数据，注意了，这是该控件唯一需要注意的地方，当然大家也可以根据自己的数据类型做修改，里面的逻辑就是，你传入自己从接口获取到的data，他会根据 data. curPage和data. pageCount来判断hasMore的值

//loadMoreComplete 
该方法是整个组件的核心，大家可以根据自己的数据类型做相应的修改，或者根据自己的业务逻辑做相应的修改

• loadMoreFail 加载失败

• clickLoadMore 点击 loadmore 控件时触发, 只有加载失败时才会进入页面回调方法

最后给大家看一下wxss文件

.loadmore {
   height: 35px;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .loadmore text{
   font-size: 13px;
   color: #bfbfbf;
   font-weight: bold;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .icon{
   width: 25px;
   height: 25px;
   margin-right: 10px;
 }

 .active {
   animation: weuiLoading 0.6s steps(12, end) infinite;
 }

 @keyframes weuiLoading {
   0% {
     transform: rotate3d(0, 0, 1, 0deg);
   }
 
   100% {
     transform: rotate3d(0, 0, 1, 360deg);
   }
 }

具体使用可以参考https://github.com/zzjian/wx-wanandroid