前端vue简单好用的上拉加载下拉刷新组件,支持列表分页 本地分页

Posted 2023-06-10 ccVue

前端vue简单好用的上拉加载下拉刷新组件,支持列表分页 本地分页, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=12942

效果图如下:

 

 

 

 

#### 使用方法

```使用方法

<!-- pullDown:下拉刷新 back-top: 回到顶部  -->

<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">

</ccPullScroll>

```

#### HTML代码部分

```html

<template>

<view class="content">

<!--  -->

<div class="mui-content-padded">

<!-- pullDown:下拉刷新 back-top: 回到顶部  -->

<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">

<!-- 列表组件 -->

<CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList>

</ccPullScroll>

</div>

</view>

</template>

```

#### JS代码 （引入组件 填充数据）

```javascript

<script>

import CCBProjectList from \'../../components/ccPageView/CCProjectList.vue\';

import ccPullScroll from \'../../components/ccPullScroll/index.vue\'

export default

components:

CCBProjectList,

ccPullScroll

,

data()

return

// 列表总数量

totalNum: 60,

//  页码 默认1开始

curPageNum: 1,

// 列表数组

projectList: []

,

mounted()

// 页面刷新方法 会自动调用pulldown一次

this.pageRefresh();

,

methods:

pageRefresh()

let myThis = this;

this.$nextTick(() =>

myThis.$refs.pullScroll.refresh();

);

,

pullDown(pullScroll)

console.log(\'下拉刷新\');

this.projectList = [];

this.curPageNum = 1;

setTimeout(() =>

this.requestData(pullScroll);

, 300);

,

// 上拉加载

onReachBottom()

// 数据全部加载完

if (this.curPageNum * 10 >= this.totalNum)

else

this.curPageNum++;

this.requestData();

,

// 列表条目点击事件

goProDetail(item)

,

requestData()

// 模拟请求参数设置

let reqData =

\'area\': \'\',

"pageSize": 10,

"pageNo": this.curPageNum

let myThis = this;

setTimeout(function()

// 模拟请求接口

for (let i = 0; i < 10; i++)

myThis.projectList.push(

\'proName\': \'产品名称\' + i,

\'proUnit\': \'公司名称\' + i,

\'area\': \'广东省\',

\'proType\': \'省级项目\',

\'stage\': \'已开工\',

\'id\': 10 * (myThis.curPageNum + i) + myThis.curPageNum + \'\'

);

// 列表总数量

myThis.totalNum = 60;

// 如果是最后一页

if (myThis.curPageNum * 10 >= myThis.totalNum)

myThis.$refs.pullScroll.finish();

else

// 不是最后一页

myThis.$refs.pullScroll.success();

, 600);

</script>

```

#### CSS

```css

<style>

page

 

.content

display: flex;

flex-direction: column;

.mui-content-padded

margin: 0px 14px;

/* */

.pullScrollView

display: flex;

flex-direction: column;

</style>

```

vue-上拉加载下拉刷新组件

vue在移动端开发过程中，上拉加载、下拉刷新是页面的基本需求，现在给大家介绍一种基于touch事件封装的刷新组件。

组件支持传参、传递事件、请求成功异步回调、上拉与触底触发加载或刷新。

父子组件间的通信

这里我们有两个页面，父组件note.vue与刷新组件baseScroll.vue。

通过Prop向子组件传递数据、通过事件向父组件发送消息、通过插槽slot分发内容。

note：

<base-scroll v-bind:url="url" 
             v-bind:param="param" 
             @send-data="sendData" 
             ref="baseScroll">
　　<div slot="content">
　　　　<!--内容区-->
　　</div>
</base-scroll>

这里我们note页面向子组件传递了请求地址、参数，sendData则用来接收子组件的事件回调。

baseScroll：

props:{
        // 请求数据的地址
        url:‘‘,
        // 请求参数
        param:{
            type: Object,
        },
        // 每页显示数据条数
        pageSize: {
            default:10
        },
        pageNoName: {
            default: ‘page_no‘
        },
        pageSizeName: {
            default: ‘page_size‘
        },
 }

下拉刷新、上拉加载触发条件

组件里面我们使用touch相关事件来达到刷新、加载的效果。

baseScroll：

<div class="vue-scroll"
    @touchstart="touchStart($event)"
    @touchmove="touchMove($event)"
    @touchend="touchEnd($event)"> 
    <slot name="content"></slot>
</div>

其实机制很简单，就是上滑到页面顶部触发刷新，滑动到页面触底触发数据加载 。关键我们要通过偏移量来判断什么时候刷新或加载。这里有篇详细介绍页面偏移量的文章，点我传送门！

baseScroll：

touchStart(e) {  
    // 屏幕高度
    this.clientHeight=parseInt(`${document.documentElement.clientHeight}`) 
    //滚动开始页面距顶距离
    this.scrollTopStart=window.scrollY    
    // 页面高度                 
    this.pageHeight=e.currentTarget.clientHeight
    // 触摸距离页面起点
    this.startY = e.targetTouches[0].pageY 
    // 触摸距离屏幕起点 
    this.clientY = e.targetTouches[0].clientY
},
touchEnd(e) {
    if(!this.hasMove)return
    this.hasMove=false
    // 滚动结束页面距顶距离
    this.scrollTopEnd=window.scrollY 
    var sLength=this.scrollTopEnd-this.scrollTopStart
    if(this.clientHeight+this.startY+sLength+15>=this.pageHeight+this.clientY){
        this.nextPage()  //页面加载
    }else if(this.startY+sLength<=this.clientY){
        this.refresh()  //页面刷新
    }     
},
touchMove(e) {
    this.hasMove=true
},

touchStart拿到滚动起点的位置及其他页面或屏幕高度；touchEnd中通过判断滚动的值来确定是加载或刷新；hasMove值用来区分用户的操作是点击还是滑动。

加载数据、执行回调

确认后是下拉刷新还是上拉加载后，我们执行相应的操作。

baseScroll：

refresh(){
    this.currPageNo = 1
    this.getData(data=>{
       
    },0)
},
nextPage(){
    this.getData(data => {
    }, 1)
},
getData(callback, type){
    var self=this
    // 设置分页参数
    if (typeof this.param === ‘string‘) {
      this.param = JSON.parse(this.param);
    }
    this.param[this.pageNoName]=this.currPageNo
    this.param[this.pageSizeName]=this.pageSize
    $.ajax({
        type: "get",
        url: this.url,
        data: this.param,
        dataType: ‘json‘,
        success: function (res) {
            var data=res.data
            callback(data)
            self.currPageNo += 1;     
            self.$emit(‘send-data‘, data,type)            
        },
    })
},

这里我是调用接口获取数据然后$emit(‘send-data‘,data,type)传递数据给父组件，当然页面数据上的操作显示就交给父组件进行模板渲染，子组件内部可以做些加载、刷新的动画显示。

并且只要涉及到页面分页、需要上拉下拉操作的页面都可以复用该组件，只是接口地址、参数不同！