uni-app Hbuderx 3.1.22下拉刷新功能无效

uni-app Hbuderx 3.1.22下拉刷新功能无效

代码片段

模板代码

<template>  
    <!-- #ifdef H5   -->      
    <view   
        class="mix-refresh-content"  
        :style="{  
                transform: 'translateY('+ pageDeviation +'px)',  
                transition: pageTransition + 's',  
                height: 'calc(100% - ' + pageTop + 'px)',  
                maxHeight: 'calc(100% - ' + pageTop + 'px)'  
            }"  
        @touchstart="pageTouchstart"  
        @touchmove="pageTouchmove"  
        @touchend="pageTouchend"  
    >  
    <!-- #endif --&gt;  
    <!-- #ifndef H5  -->      
    <view   
        class="mix-refresh-content"  
        :style="{  
                transform: 'translateY('+ pageDeviation +'px)',  
                transition: pageTransition + 's',  
                height: 'calc(100vh - ' + pageTop + 'px)',  
                maxHeight: 'calc(100vh - ' + pageTop + 'px)'  
            }"  
        @touchstart="pageTouchstart"  
        @touchmove="pageTouchmove"  
        @touchend="pageTouchend"  
    >  
    <!-- #endif --&gt;  

        <!-- 下拉刷新 -->  
        <view class="mix-loading-wrapper">  
            <image   
                class="mix-loading-icon"   
                :class="{active: refreshing, ready: refreshReady}"   
                src="/static/refresh.png"&gt;  
            </image&gt;  
        </view&gt;  

        <slot&gt;</slot&gt;  

    </view&gt;  
</template&gt;

脚本代码

let startY, moveY, windowHeight = 500, platform;  
let timeDiff = 0;  
let touchending;  
export default {  

    props: {  
        top: {  
            //距离顶部距离,单位upx  
            type: Number,  
            default: 0  
        },  
    },  
    data() {  
        return {  
            pageDeviation: 0, //下偏移量  
            pageTransition: 0, //回弹过渡时间  
            refreshReady: false, //进入刷新准备状态  
            refreshing: false, // 进入刷新状态  
        };  
    },  
    computed: {  
        pageTop(){  
            return uni.upx2px(this.top);  
        }  
    },  
    created(){  
        uni.getSystemInfo({  
            success: function(e) {  
                platform = e.platform;  
                windowHeight = e.windowHeight;  
            }  
        })  
    },  
    methods: {  
        pageTouchstart(e){  
            console.log('pageTouchstart--',e);  
            touchending = false;  
            this.pageTransition = 0;  
            startY = e.touches[0].pageY;  
        },  
        pageTouchmove(e){  
            console.log('pageTouchmove--',e);  
            if(touchending){  
                return;  
            }  
            moveY = (e.touches[0].pageY - startY) * 0.4;  
            if(moveY >= 0){  
                this.pageDeviation = moveY;  

                this.$emit('setEnableScroll', false);  
            }  
            if(moveY >= 50 && this.refreshReady === false){  
                this.refreshReady = true;  
            }else if(moveY < 50 && this.refreshReady === true){  
                this.refreshReady = false;  
            }  
            if(platform === 'ios' && e.touches[0].pageY > windowHeight + 10){  
                this.pageTouchend();  
            }  
        },  
        pageTouchend(){  
            console.log('pageTouchend');  
            touchending = true;  
            if(moveY === 0){  
                return;  
            }  
            this.pageTransition = 0.3;  
            if(moveY >= 50){  
                this.startPulldownRefresh();  
            }else{  
                this.pageDeviation = 0;  
            }  

            if(this.refreshReady === true){  
                this.refreshReady = false;  
            }  
            //修复下拉一点回弹后页面无法滚动的bug  
            this.$emit('setEnableScroll', true);  
            startY = moveY = 0;  
        },  
        //开启下拉刷新  
        startPulldownRefresh(){  
            if(+new Date() - timeDiff < 100){  
                return;  
            }  
            timeDiff = +new Date();  
            this.refreshing = true;  
            this.pageDeviation = uni.upx2px(90);  
            this.$emit('refresh');  
        },  
        //结束下拉刷新  
        endPulldownRefresh(){  
            this.refreshing = false;  
            this.pageDeviation = uni.upx2px(0);  
            //this.$emit('setEnableScroll', true);  
        },  
    }  
}

样式代码

.mix-refresh-content{  
    display: flex;  
    flex-direction: column;  
    position: relative;  
}  
/* 下拉刷新部分 */  
.mix-loading-wrapper{  
    position: absolute;  
    left: 0;  
    top: 0;  
    transform: translateY(-100%);  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    width: 100%;  
}  

.mix-loading-icon{  
    width: 70upx;  
    height: 70upx;  
    transition: .3s;  
}  
.mix-loading-icon.ready{  
    transform: rotate(180deg);  
}  
.mix-loading-icon.active{  
    animation: loading 1s infinite linear;  
}  

[@keyframes](/user/keyframes) loading {  
0% {  
    transform: rotate(0deg)  
}  
100% {  
    transform: rotate(359deg)  
}  
}

更多关于uni-app Hbuderx 3.1.22下拉刷新功能无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

更多关于uni-app Hbuderx 3.1.22下拉刷新功能无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已确定,已加分,预计下版修复

3.2.0 alpha 已修复

回到顶部