低代码高性能原生UI框架Refresher 下拉刷新
组件类型：UxRefresherComponentPublicInstance
支持自定义文案
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| state | Number | 0 | 状态下标 |
| states | string[] | '['下拉刷新', '释放刷新', '刷新中...', '刷新成功']' | 状态文案 |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| click | 点击触发 | MouseEvent |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="下拉刷新" :bold="true">
<ux-text text="支持自定义文案"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="下拉刷新" text="https://www.uxframe.cn/component/func/refresher.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="下拉刷新" :bold="true">
<ux-refresher :state="0"></ux-refresher>
</ux-card>
<ux-card direction="column" icon="arrowright" title="释放刷新" :bold="true">
<ux-refresher :state="1"></ux-refresher>
</ux-card>
<ux-card direction="column" icon="arrowright" title="刷新中..." :bold="true">
<ux-refresher :state="2"></ux-refresher>
</ux-card>
<ux-card direction="column" icon="arrowright" title="刷新成功" :bold="true">
<ux-refresher :state="3"></ux-refresher>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自定义文案" :bold="true">
<ux-refresher :state="2" :states="['下拉刷新', '释放刷新', '努力刷新中...', '刷新成功']"></ux-refresher>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="下拉刷新" :bold="true">
<ux-text text="支持自定义文案"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="下拉刷新" text="https://www.uxframe.cn/component/func/refresher.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="下拉刷新" :bold="true">
<ux-refresher :state="0"></ux-refresher>
</ux-card>
<ux-card direction="column" icon="arrowright" title="释放刷新" :bold="true">
<ux-refresher :state="1"></ux-refresher>
</ux-card>
<ux-card direction="column" icon="arrowright" title="刷新中..." :bold="true">
<ux-refresher :state="2"></ux-refresher>
</ux-card>
<ux-card direction="column" icon="arrowright" title="刷新成功" :bold="true">
<ux-refresher :state="3"></ux-refresher>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自定义文案" :bold="true">
<ux-refresher :state="2" :states="['下拉刷新', '释放刷新', '努力刷新中...', '刷新成功']"></ux-refresher>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script><script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script>css
<style lang="scss">
</style><style lang="scss">
</style>