coolui-scroller

Appearance

当前文档uni-app 版coolui-scroller-uni 改用 原生微信小程序版 →

Refresh 下拉刷新组件 ​

<coolui-scroller-refresh> 提供下拉刷新动画，放在 coolui-scroller 的 refresh 插槽里。type 支持 default（小程序原生三个圆点）、base、logoText、diy 四种效果。

对应原生微信小程序版：Refresh 下拉刷新组件

代码演示 ​

vue
<template>
  <coolui-scroller :isEmpty="isEmpty" @refresh="refresh" @loadmore="loadmore">
    <template #refresh>
      <coolui-scroller-refresh type="default" :config="refreshSetting" />
    </template>

    <view class="item" v-for="(item, index) in list" :key="index">{{ item.title }}</view>
  </coolui-scroller>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CooluiRefreshConfig } from 'coolui-scroller-uni/types'

const isEmpty = ref(false)
const list = ref<{ title: string }[]>([])

// 下拉行程(background.height) 大于 refresh 自身高度(height) 时，
// 松手先回落到 height 显示加载动画、刷新完成再整体回弹，也就是「两段回弹」的弹性感
const refreshSetting = ref<CooluiRefreshConfig>({
  style: 'black',       // 圆点深色 / 浅色
  height: 50,           // refresh 自身高度
  background: {
    color: '#f2f2f2',
    height: 120,        // 下拉行程
  },
})

function refresh() {
  // 刷新完成后 resolve()
  return Promise.resolve()
}

function loadmore() {
  // 加载完成后 resolve()
  return Promise.resolve()
}
</script>
vue
<template>
  <coolui-scroller :isEmpty="isEmpty" @refresh="refresh" @loadmore="loadmore">
    <template #refresh>
      <coolui-scroller-refresh type="default" :config="refreshSetting" />
    </template>

    <view class="item" v-for="(item, index) in list" :key="index">{{ item.title }}</view>
  </coolui-scroller>
</template>

<script>
export default {
  data() {
    return {
      isEmpty: false,
      list: [],
      // 下拉行程(background.height) 大于 refresh 自身高度(height) 时，
      // 松手先回落到 height 显示加载动画、刷新完成再整体回弹，也就是「两段回弹」的弹性感
      refreshSetting: {
        style: 'black',       // 圆点深色 / 浅色
        height: 50,           // refresh 自身高度
        background: {
          color: '#f2f2f2',
          height: 120,        // 下拉行程
        },
      },
    }
  },
  methods: {
    refresh() {
      // 刷新完成后 resolve()
      return Promise.resolve()
    },
    loadmore() {
      // 加载完成后 resolve()
      return Promise.resolve()
    },
  },
}
</script>

属性 ​

属性说明类型默认值
type下拉效果：default（小程序原生）/ base / logoText / diyString'default'
threshold下拉进度 0~1，支持 v-model:thresholdNumber0
isloading是否加载中Booleanfalse
refreshstate刷新状态：pulldown / loosen / loading，支持 v-model:refreshstateString'pulldown'
config下拉配置（与默认配置深合并）Object{}

config 常用项 ​

字段说明默认值
heightrefresh 自身高度（松手后回落到这里显示加载动画）50
background.height下拉行程，设得比 height 大才有两段回弹的弹性感—
background.color / img下拉背景颜色 / 图片—
style圆点深色 black 或浅色'black'
shake下拉时是否抖动false
isAutoTriggered松手后是否自动回弹（false 时需手动调用 scroller.settriggered(false) 配合）true
text.color / shadowbase / logoText 类型的文字颜色与阴影{ color: '#000', shadow: 0 }

事件 ​

事件说明参数
update:threshold / thresholdChange下拉进度变化threshold: number
update:refreshstate / refreshstateChange刷新状态变化state: 'pulldown' | 'loosen' | 'loading'

插槽 ​

插槽说明
parallax视差区域，配合 coolui-scroller-parallax 使用（type="diy"）
默认diy 类型的自定义内容

与原生版的差异 ​

  • props 完全一致；动画实现上原生用 wx.createAnimation，uni-app 版用 CSS transition；
  • 原生 externalClasses: ['refresh-class'] 换成 virtualHost + apply-shared，页面里用 :deep() 覆盖样式；
  • 新增 update:threshold / update:refreshstate（可写 v-model:threshold），原生的 thresholdChange / refreshstateChange 依然保留。

相关 ​