@uone/u-scroll-page

1.0.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @uone/u-scroll-page

Weekly Downloads

0

Version

1.0.1

License

ISC

Unpacked Size

9.72 kB

Total Files

6

Last publish

Collaborators

  • uone