@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 | 自定义加载完成后的提示文案