1.1.0 • Published 11 months ago
hfex-list v1.1.0
HfexList
下拉滚动加载组件
安装使用
npm
安装
npm i hfex-list
vue组件引入(Vue2)
<hfex-list
v-model="flowLoading"
:finished="flowFinished"
:error="flowError"
@load="onLoad"
>
<div
v-for="item in list"
:key="item"
class="list"
>
{{ item }}
</div>
</hfex-list>
import HfexList from 'hfex-list/dist/vue2/index.esm.js';
export default {
data() {
return {
flowLoading: false,
flowFinished: false,
flowError: false,
list: []
}
},
components:{
MList
},
methods:{
onLoad() {
//这里就模拟一下ajax请求
//加载失败就把flowError设置为true即可,这里就不做显示了
// 异步更新数据
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
// 加载状态结束
this.flowLoading = true;
setTimeout(() => {
this.flowLoading = false;
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
// 数据全部加载完成
if (this.list.length >= 40) {
this.flowFinished = true;
}
}, 1000);
}
}
}
vue组件引入(Vue3)
<script
lang="ts"
setup
>
import {ref} from 'vue';
import HfexList from 'hfex-list';
const list = ref<Array<number>>([]);
const flowLoading = ref(false);
const flowFinished = ref(false);
const flowError = ref(false);
const onLoad = () => {
flowLoading.value = true;
setTimeout(() => {
flowLoading.value = false;
for (let i = 0; i < 10; i++) {
const length= list.value.length+1
list.value.push(length);
}
// 数据全部加载完成
if (list.value.length >= 40) {
flowFinished.value = true;
}
}, 1000);
}
</script>
props
Prop | Type | Default | description |
---|---|---|---|
finished | bool | false | 数据是否加载结束 |
finishedText | string | 没有更多了 | 数据全部加载结束提示词 |
loadingText | string | 加载中... | 数据加载中提示词 |
error | bool | false | 数据加载失败 |
errorText | string | 加载失败... | 数据加载失败提示词 |
immediateCheck | bool | true | 组件挂载时启动加载数据 |
pullupTipsBg | string | #f4f5f7 | 提示词容器背景色 |