Vue H5实现下拉刷新

参考vue-pullrefresh-master插件： https://github.com/watson-yan/vue-pullrefresh

首先定义一个下拉刷新的组件component

Vue.component('pull-refresh', {
    template: '#pullRefresh',
    props: {
        next: { // 刷新函数
            type: Function,
            required: true
        }
        },
    data: function() {
        return {
            msg: '',
            flag: 0, // 表示是否达到刷新条件
            loading: 0,  // 表示是否正在刷新中
            touchStart: 0,  // 手指触摸屏幕的起点
            distance: 0     // 手指滑动的距离
        }
    },
    mounted: function() {
        var self = this;
        const container = self.$refs.container
        container.addEventListener('touchstart', function(e) {
            // 如果loading为true就代表刷新函数正在进行，此时阻止下拉操作，返回
            if (self.loading) { 
                e.preventDefault();
                return;
            }
            // 取第一个手指的触摸点作为起始点
            self.touchStart = e.targetTouches[0].clientY;
        })
        container.addEventListener('touchmove', function(e) {
            // 如果没有触摸起始点，返回
            if (!self.touchStart) {
                return;
            }
            if (self.loading) {
                e.preventDefault();
                return;
            }
    
            const touch = e.targetTouches[0];
            const scrollTop = container.scrollTop;
            if (scrollTop === 0) {
                self.distance = touch.clientY - self.touchStart;
                if (self.distance > 0) {
                    e.preventDefault();
                    if (self.distance < 80) {
                        container.style.overflow = 'inherit';
                        container.style.transform = 'translate3D(0px, ' + self.distance +'px, 0px)';
                        if (self.distance > 55) {
                            self.msg = '释放刷新';
                            self.flag = 1;
                        } else {
                            self.msg = '下拉刷新';
                        }
                    }
                }
            }
        })
        container.addEventListener('touchend', function(e) {
            if (self.distance === 0) {
                return;
            }
            if (self.loading) {
                e.preventDefault();
                return;
            }
            
            if (self.flag && self.distance > 0) {
                container.style.transform = 'translate3D(0px, 50px, 0px)';
                self.loading = 1;
                self.next().then(function() {
                    self.flag = 0
                    self.loading = 0
                    container.scrollTop = 0
                    container.style.overflow = 'auto'
                    container.style.transform = 'translate3D(0px, 0px, 0px)'
                });
                return;
            }
            // 重置变量
            self.flag = 0;
            container.style.overflow = 'auto';
            container.style.transform = 'translate3D(0px, 0px, 0px)';
        })
    }
});

页面上使用html

<pull-refresh :next="refresh">
    <div slot="list" class="overflow-hide">
         <div v-for="(item,key) in dataList" :key="key">
              {{item}}
         </div>
    </div>
</pull-refresh>

获取数据js

data() {
    return {
        lockStatus: false,
        dataList: []
    }
},
methods: {
    refresh: function(){
        var self = this;
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                self.fetchData();//获取数据
                resolve();
            }, 500);
        });
    },
    fetch_list: function () {
        var self = this;
        if(self.lockStatus){
            return;
        }
        self.lockStatus = true;
        xhr.post(
                '/get/order_list',
                '加载中...'
            )
            .then(function(res) {
                self.lockStatus = false;
                if (res.result === 0) {
                    self.dataList = res.data.list;
                }
                _.$dialog_msg(res.msg);
                
            })
            .catch(_.$dialog_error)
    }
}

css

.vue-pull-refresh {
    height: 100%;
    overflow-y: auto;
    transition: 330ms;
    -webkit-overflow-scrolling: touch;
}
.vue-pull-refresh-msg {
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #666;
    border-bottom: 1px solid #eee;
    position: fixed;
    z-index: 999;
    width: 100%;
    top: -50px;
}
.vue-pull-refresh-msg .icon-reverse {
    transform: rotate(180deg);
    transition: all .3s ease;
}
.vue-pull-refresh-loading {
    -webkit-animation:loadRotate 1s linear infinite;
    animation:loadRotate 1s linear infinite;
}
@-webkit-keyframes loadRotate{
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@keyframes loadRotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}