@uone/u-scroll-page
TODO: 该组件一般使用于分页请求
Usage
滚动翻页
安装
npm i u-scroll-page
基本使用
-
UScrollPage
已注册为vue插件
import UScrollPage from 'u-scroll-page'
Vue.use(UScrollPage)
<template>
<div class="content">
<u-scroll-page
@getPageList="getList"
:total="total"
:option="params"
container=".content"
:isLoading="isLoading"
loadingText="加载中..."
finishedText="完成啦。。"
:openLoading="true"
>
<template slot="list">
<div class="list" v-for="(item,index) of list" :key="index">
<span>{{index}}</span>
</div>
</template>
<div slot="loading" style="height:60px; text-align:center">正在加载中...</div>
<div slot="finished">哈哈,没有数据了</div>
</u-scroll-page>
</div>
</template>
<script>
export default {
data () {
return {
params: {
pageNum: 1,
pageSize: 10
},
isLoading: false,
list: [1,2,3,4,5,6,7,8,9,10],
// list: [],
total: 10
}
},
methods: {
// 滚动触发事件
getList (pageNum) {
this.isLoading = true
// 异步更新数据
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < this.params.pageSize; i++) {
this.list.push(this.list.length + 1)
}
// 加载状态结束
this.isLoading = false
},1000)
}
}
}
</script>
示例
API
Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
container | 滚动容器 | String | '' | -- |
option | 配置项,根据业务字段设置 | Object | pageNum: 1,pageSize: 10 | |
total | 总条数 | Number | 10 | ---- |
offset | 滚动条与底部距离小于 offset 时触发load事件 | Number | 40 | ---- |
openLoading | 是否开启底部加载提示 | Boolean | true | false |
isLoading | 是否处于加载状态 | Boolean | false | true |
loadingText | 加载过程中的提示文案 | String | 加载中... | ---- |
finishedText | 加载完成后的提示文案 | String | 没有更多了 | ---- |
Event
事件名 | 说明 | 回调参数 |
---|---|---|
getPageList | 滚动触发分页请求 | val:当前请求的页数 |
Slots
|名称 | 说明 |:---------|:------|:-------| |list | 列表内容 |loading | 自定义底部加载中提示 |finished | 自定义加载完成后的提示文案