更新记录

2.1.7（2021-08-27）

版本修正（请将Hbuilder X升级至3.2以上）

2.1.6（2021-07-21）

解决手机端h5头部底部出现空白的bug

2.1.4（2021-07-16）

修复因scroll-view更新产生的无法下拉刷新的bug

最新项目demo请在Github仓库中dev分支下获取

平台兼容性

load-refresh

• 页面局部下拉刷新、上划加载更多、回弹效果等。
• 可以在App端、微信小程序端、H5端完美运行。
• 刷新动画使用了Epic Spinners，也可以根据情况自定义。
• 组件的状态文字提醒，也可根据自身需求进行修改。
• 最新的项目示例代码可在GitHub获取。

使用方法

在 script 中引用组件

import loadRefresh from '@/components/load-refresh/load-refresh.vue'
export default {
  components: {
    loadRefresh
  }
}

在 template 中使用组件

<load-refresh
  ref="loadRefresh"
  :isRefresh="true"
  refreshType="hollowDots"
  color="#04C4C4"
  heightReduce="0"
  backgroundCover="#F3F5F5"
  :currentPage="currentPage"
  :totalPages="totalPages" 
  @loadMore="loadMore" 
  @refresh="refresh">
  <view slot="content-list">
    <!-- 数据列表 -->
  </view>
</load-refresh>

Props 参数说明

Events 事件说明

Methods 组件内方法

Notes 注意事项

• 注意将数据集放在插槽slot="content-list"中。
• 加载更多loadMore()过程中，建议在请求时使用currentPage + 1形式，成功后的回调函数中去更新currentPage的值。
• @loadMore、@refresh触发后，在数据请求成功后，必须调用completed()去结束动画。
• 如有需要使用组件实现tabsSwiper全屏选项卡功能，可参考tabsSwiper。
• 使用出现问题可参考常见问题汇总
• 如果对您有帮助，请鼓励支持一下，。

Demo 代码示例

<template>
  <view class="content">
    <load-refresh
      ref="loadRefresh"
      :isRefresh="true"
      :currentPage="currentPage"
      :totalPages="totalPages" 
      @loadMore="loadMore" 
      @refresh="refresh">
      <view slot="content-list">
        <!-- 数据列表 -->
        <view class="dataList" v-for="(item,index) in list" :key="index">
          {{item}}
        </view>
      </view>
    </load-refresh>
  </view>
</template>

<script>
  import loadRefresh from '@/components/load-refresh/load-refresh.vue'
  export default {
    components: {
      loadRefresh
    },
    data() {
      return {
        list: [], // 数据集
        currentPage: 1, // 当前页码
        totalPages: 2 // 总页数
      }
    },
    methods: {
      // 上划加载更多
      loadMore() {
        // 模拟请求成功后的回调
        setTimeout(() => {
          // 1. list数组添加新数据
          // 2. 更新当前页码 currentPage
          // 3. 调用completed()方法 this.$refs.loadRefresh.completed()
        }, 800)
      },
      // 下拉刷新数据列表
      refresh() {
        // 模拟请求成功后的回调
        setTimeout(() => {
          // 1. list重新赋值，应避免 this.list = [] 这种操作
          // 2. 更新当前页码 currentPage
          // 3. 调用completed()方法 this.$refs.loadRefresh.completed()
        }, 1600)
      },
      // 后期可将loadMore()与refresh()合并成一个函数方法去处理，因为本质上这两个方法只有在list赋值上面有不同
      // 代码触发下拉刷新方法
      runRefresh() {
        this.$refs.loadRefresh.runRefresh()
      }
    }
  }
</script>

<style>
  .content{
    width: 100%;
    height: 100%;
  }
</style>