更新记录

1.0.1（2023-06-21） 下载此版本

• 修复Android Demo异常报错问题
• 修改小程序中，自定义下拉头宽度无法100%问题

1.0.0（2023-06-20） 下载此版本

初始化发布

平台兼容性

uni-app

其他

blog-smart-refresh

组件属性

组件：blog-smart-refresh

使用方法

 <blog-smart-refresh @onRefreshListener="onRefresh">
      ...
 </blog-smart-refresh>

自定义下拉刷新头(不使用默认刷新头)

• 用法

 <blog-smart-refresh @onRefreshListener="onRefresh">
      <template v-slot:header>
         <CustomHeader/>
      </template>
      ...
 </blog-smart-refresh>

• CustomHeader实现

<template>
  <view class="custom-header">
    外部自定义头部栏 + {{ tips }}
  </view>
</template>

<script>
export default {
  data() {
    return {
      tips: "下拉刷新",
      downRefreshHeight: 70
    }
  },
  created() {
    uni.$on("onSmartRefreshPullListener", this.onPull)
  },
  methods: {
    onPull({status, y}) {
      switch (status) {
        case "start":
          this.tips = "下拉刷新";
          break;
        case "move":
          if ((y || 0) > (this.downRefreshHeight * 1.1)) {
            this.tips = "松开刷新数据";
          } else {
            this.tips = "下拉刷新";
          }
          break;
        case "refresh":
          this.tips = "正在刷新";
          break;
        case "refresh-true":
          this.tips = "刷新完成";
          break;
        case "refresh-false":
          this.tips = "刷新失败，请稍后重试";
          break;
        case "finish":
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.custom-header {
  width: 100%;
  display: flex;
  background-color: #dd524d;
  padding: 20px;
  align-items: center;
  height: 70px;
  color: #fff;
  box-sizing: border-box;
  font-size: 14px;
  justify-content: center;
}

</style>