下拉刷新，分页加载组件封装（scroll-view）

通过对 scroll-view组件的封装，实现简单的下拉刷新，分页加载的功能

scroll-view

一、需要注意的几个细节

当开启refresher-enabled，设置refresher-default-style为none,就可以使用slot="refresher"来设置自定义下拉刷新的样式了,官方文档上没有写，但是通过在开发者工具中预览效果可以查看如何使用

二、封装组件

2.1 对scroll-view的封装

1. index.json

//consult-list 为要展示的列表
{
  "component": true,
  "usingComponents": {
    "consult-list": "../scroll-list/consult-list/index",
   }
}

2. index.html

<template name="empty"></template>
<template name="consult">
  <consult-list list="{{list}}" />
</template>
<scroll-view
  bindrefresherrefresh="bindrefresherrefresh"
  bindscrolltolower="bindscrolltolower"
  enhanced="{{true}}"
  fast-deceleration="{{true}}"
  refresher-background="{{color}}"
  refresher-default-style="none"
  refresher-enabled="{{true}}"
  refresher-threshold="{{40}}"
  refresher-triggered="{{isRefreshLoading}}"
  scroll-top="{{ scrollOffset }}"
  scroll-y="{{true}}"
  style="height:calc(100vh {{reduceHeight?reduceHeight:''}});"
>
	<!-- 自定义的加载样式 -->
  <view
    class="flex-row align-start width-full"
    slot="refresher"
    style="height: 70rpx;background-color:{{color}};"
  >
    <view
      class="t-center width-full"
      style="background-color:{{color}};"
    >
      <van-loading
        size="20px"
        type="spinner"
      />
    </view>
  </view>
  <template
    data="{{list}}"
    is="{{name}}"
  />
</scroll-view>

3. index.js

Component({
  options: {
    addGlobalClass: true, //配置组件样式，让页面样式与组件样式可以相互覆盖
  },
  data: {
    list: [], //请求得到的列表数据
    pageNum: 1, //当前页数
    totalPage: 1, //全部页数
    scrollOffset: 0, //设置滚动条距顶部的位置
  },
  properties: {
    //要展示的列表组件名
    name: {
      type: String,
      value: 'empty',
    },
    //控制页面滚动的高度
    reduceHeight: {
      type: String,
      value: null,
    },
    //每一页展示的条数
    pageSize: {
      type: Number,
      value: 20,
    },
    //控制页面是否下拉刷新
    isRefreshLoading: {
      type: Boolean,
      value: false,
    },
    // 刷新时的背景色
    color: {
      type: String,
      value: '#eef1f4',
    },
    // 发送请求的参数
    params: {
      type: Object,
      value: null,
    },
    // 请求函数
    fetchFunction: {
      type: Object,
      value: () => {},
    },
  },

  pageLifetimes: {
    show() {
      this.setData({ pageNum: 1 }, () => {
        this.fetchRequest();
      });
    },
  },

  methods: {
    fetchData(type) {
      if (this.data.totalPage < this.data.pageNum) {
        return;
      }
      if (type) {
        this.fetchRequest(type);
      } else {
        this.fetchRequest();
      }
    },

    async fetchRequest(type) {
      let { data } = await this.properties.fetchFunction.fun({
        ...this.properties.params,
        pageNum: this.data.pageNum,
        pageSize: this.data.pageSize,
      });
      
      if (type === 'lower') {
        this.setData({ list: [...this.data.list, ...data.list], totalPage: data.totalPage });
      } else {
        this.setData({ list: data.list, totalPage: data.totalPage });
      }
    },

    //下拉刷新
    bindrefresherrefresh() {
      this.setData({ pageNum: 1, pageSize: this.data.pageSize, totalPage: 1 }, async () => {
        await this.fetchData();
        this.setData({ isRefreshLoading: false });
      });
    },

    //上拉加载
    bindscrolltolower() {
      if (this.data.pageNum >= this.data.totalPage) {
        return;
      }
      this.setData({ pageNum: this.data.pageNum + 1 }, () => {
        this.fetchData('lower');
      });
    },
  },
});

2.2 对scroll-list的封装(要展示的列表consult-list)

1. index.json

{
  "component": true
}

2. index.js

Component({
  options: {
    addGlobalClass: true,
  },
  properties: {
  // 用来接收要展示的列表数据
    list: {
      type: Array,
      value: [],
    },
  },

  methods: {
   // 组件方法
  },
});

对index.html、index.wxss按照实际页面效果编写即可，然后通过list数组来循环填充数据即可

三、 调用组件实例

1. index.json
   custom-scroll就是上面对scroll-view封装的组件

{
  "navigationBarTitleText": "咨询记录",
  "enablePullDownRefresh": true,
  "usingComponents": {
   "custom-scroll": "./components/custom-scroll/index",
   }
}

2. index.js

// 导入请求函数
import { getConsultRecords } from '../../../../resource/patient-manage';

Page({
  data: {
  // 要传递的请求函数
    fetchFunction: {
      fun: (params) => {
        return getConsultRecords(params);
      },
    },
    // 要传递的请求参数
    params: {
      platUserId: '',
    },
  },
  onLoad(e) {
    this.data.params.platUserId = e.platUserId;
    this.setData({
      params: this.data.params,
    });
  },
});

3. index.html

<custom-scroll
  color="#eee"
  fetch-function="{{fetchFunction}}"
  name="consult"
  pageSize="{{40}}"
  params="{{params}}"
></custom-scroll>