uni-app 小程序上拉加载 && 下拉刷新

适用于 uni-app，独立包，无依赖，使用简单

思考

• 如何将配置分离？如 page_num page_limit 等等
  • 导出函数，

使用

uni-app 页面混入即可

<template>
  <view class="list">
    <view v-for="item in listData" :key="item.id">
      <list-item :item="item"></list-item>
    </view>
    <cc-load-more :status="listStatus" />
  </view>
</template>

<script>
import {
  PullUp,
  pullDown,
} from '@deepjs/uni-pull';

const pullUp = PullUp({
  pageNum: 'page_num',
  pageLimit: 'page_limit',
  needPagination: 'need_pagination',
  totalPage: 'total_page',
  hasNext: 'has_next',
  lastId: 'last_id',
})

export default {
  mixins: [
    pullUp,
    pullDown,
  ],
  onLoad() {
    this.tabId = 1
    uni.$on('logged-changed', res => {
      this.refreshPage()
    })
    uni.$on('page:refresh', (res = {}) => {
      this.refreshPage()
    })
  },
  onShow() {
    this.refreshPage()
  },
  fetchData() {
      // 设置参数
      Object.assign(this.listParams, {
        custom_params: this.tabId,
      })
      this.loadNextPage()
    },
    refreshPage() {
      this.resetList()
      this.fetchData()
    },
    listModel(params, success, err) {
      // setTimeout(() => {
      //   success(mockData);
      // }, 1000);

      const [...rest] = arguments

      // return requestTask
      return this.$api.getOrderList.apply(this, rest)
    },
    dealListErr(err) {
      // 自定义处理错误
    },
    preDealListRes(res) {
      return res
    },
    dealList(list) {
      return list.map(item => {
        return item
      })
    },
    afterDealListRes() {

    },
}
</script>