更新记录

1.0.3(2020-08-27) 下载此版本

1.新增在微信小程序上面也可以使用

1.0.2(2020-08-24) 下载此版本

1.新增充满屏幕剩余高度示例、多个tab切换示例,建议使用插件时先下载示例。

1.0.1(2020-08-13) 下载此版本

1.新增isAllowPull属性,控制是否开启下拉刷新

查看更多

平台兼容性

1.引入

全局引入

//main.js
import hrPullLoad from '@/components/hr-pull-load/hr-pull-load.vue';
Vue.component('hrPullLoad',hrPullLoad)

局部引入

import hrPullLoad from '@/components/hr-pull-load/hr-pull-load.vue';
export default {
    components:{
        hrPullLoad
    },
}

2.具体使用

<template>
    <!-- @touchmove.stop.prevent是为了阻止手机默认的滑动事件 -->
    <view class="example" @touchmove.stop.prevent>
        <hr-pull-load
         @refresh='refresh'
         @loadMore='loadMore'
         :height='700'
         :pullHeight='50'
         :maxHeight='100'
         :lowerThreshold='20'
         :bottomTips='bottomTips'
         :isAllowPull="true"
         :isTab='false'
         ref='hrPullLoad'>
         <!-- 插入自己的数据-->
            <view class="list" v-for="(item,index) in exampleInfo" :key='index'>
                <view class="left">
                    <text class="num">99</text>
                    <text class="time">00</text>
                </view>
                <view class="middle">
                    <text class="nickName">
                        派大星和海绵宝宝
                    </text>
                </view>
                <view class="right">
                    <text class="dName">1221</text>
                    <text class="rank">0127</text>
                </view>
            </view>
        </hr-pull-load>
    </view>
</template>
    import hrPullLoad from '@/components/hr-pull-load/hr-pull-load.vue';
    export default{
        data(){
            return{
                exampleInfo:[],
                bottomTips:'',
                currentPage:1,
            }
        },
        components:{
            hrPullLoad
        },
        onLoad(){
            this.getExampleData(1);
        },
        methods:{
            /*
            调用接口从后台获取数据,这里的逻辑处理大家可以参考,具体的处理大家可以自定义,需要注意的是:
            1.bottomTips用来控制触发加载更多时的底部提示
            2.this.$refs.hrPullLoad.reSet()用来重置下拉刷新状态
            */
            getExampleData(type){
            /* type 1代表下拉刷新 2代表加载更多 */
                setTimeout(()=>{
                    /* 接口获取到的数据 */
                    let data = [1,2,3,4,5,6,7,8,9,10,11,12,13];
                    /* 拿到数据后的处理 */
                    if(data.length>0){
                        if(type==1){
                            this.exampleInfo = data;
                        }
                        else if(type==2){
                            this.exampleInfo = this.exampleInfo.concat(data);
                        }
                        /* 这里的20是每次调用后台接口返回的最大数据条数,可以自定义 */
                        if(this.exampleInfo.length<20){
                            this.bottomTips = "nomore";
                        }
                        else{
                            this.bottomTips = "more";
                        }
                    }
                    else{
                        if(type==1){
                            this.exampleInfo = [];
                        }
                        else if(type==2){
                            this.currentPage--;
                        }
                        this.bottomTips = "nomore";
                    }
                    /* 这里300毫秒的延时,主要是为了优化视觉效果 */
                    setTimeout(()=>{
                        this.$refs.hrPullLoad.reSet();
                    },300);
                },500);
            },
            //自定义上拉加载更多
            loadMore(){
                this.currentPage++;
                this.bottomTips = "loading";
                this.getExampleData(2);
            },
            //自定义下拉刷新
            refresh(){
                this.currentPage = 1;
                this.getExampleData(1);
            },
        },
    }

3.参数说明

名称 类型 默认值 说明
@refresh Function - 自定义下拉刷新函数
@loadMore Funtcion - 自定义上拉加载函数
height Number 700 组件的高度,单位rpx。另外,当传入-1时,组件的高度为100%,这时需要在组件的外层套一个view,给这个view设置一个具体的高度,不然无法触发上拉加载更多(如果想让组件高度充满屏幕剩余高度,可以参考下面'其他说明'第2点)
pullHeight Number 50 组件触发下拉刷新的最小拖动距离,单位px
maxHeight Number 100 组件触发下拉刷新时的最大拖动距离,单位px
lowerThreshold Number 20 距离组件底部多远时触发加载更多,单位px
bottomTips String - 加载更多时的底部提示,‘nomore’:没有更多数据了;‘loading’:加载中...;‘more’:上拉加载更多;
isAllowPull Boolean true 组件是否开启下拉刷新
isTab Boolean false 防止多个该组件在tab切换使用时,造成的手势冲突;单个组件使用时,建议关闭;多个组件在同一页面使用时(横向tab),建议开启

4.其他说明

1.在页面中使用时,记得在页面的根节点加@touchmove.stop.prevent,这是为了阻止手机默认的滑动事件。

2.如果想实现组件自动充满屏幕剩余高度的效果,可以将组件的高度设为-1,并在组件的外面套一层view,给这个view设置一个具体的高度,高度通过height:calc( 100vh - 除了这个view以外其他元素的高度 );来设置,这样就可以获取到屏幕剩余高度(这里需要注意APP和H5的区别,主要是原生nav和tab的高度问题,nav固定高度44px,tab固定高度50px,减去高度的时候要注意这两个地方)。vh这个css属性只在android5及以上有效。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问