低代码高性能原生UI框架Refresher
组件类型：UxRefresherComponentPublicInstance
支持自定义文案
平台兼容性
UniApp X
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | √ |
UniApp Vue Nvue
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| x | x | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| state | Number | [0 | 状态下标 |
| states | Array | ['下拉刷新','释放刷新','刷新中...','刷新成功'] | 状态文案 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| click | 点击时触发 |
示例代码
html
<template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :border="false">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="下拉刷新" :bold="true">
<ux-text text="支持自定义文案"></ux-text>
</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="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :border="false">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="下拉刷新" :bold="true">
<ux-text text="支持自定义文案"></ux-text>
</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="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
import * as plus from '@/uni_modules/ux-plus'
const title = ref('')
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/refresher.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
})
</script><script setup>
import * as plus from '@/uni_modules/ux-plus'
const title = ref('')
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/refresher.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
})
</script>css
<style lang="scss">
</style><style lang="scss">
</style>