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