更新记录

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.参数说明

4.其他说明

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

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