3***@qq.com
3***@qq.com
  • 发布:2021-07-13 15:20
  • 更新:2021-08-02 11:04
  • 阅读:642

Hbuderx 3.1.22下拉刷新没用

分类:HBuilderX

用的是插间市场中一位大佬发布的插件,已经很久没有维护了,但是一直再用,更新到hbuderx最新版本后下拉就是失效了,本来想着看着hbuderx更新的内容去定位一下问题,然后看看自己能不能修复这个插件,但是好像没有看到更新的内容和插件关键代码有什么冲突

<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 -->  
    <!-- #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 -->  

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

        <slot></slot>  

    </view>  
</template>  

<script>  
    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);  
            },  
        }  
    }  
</script>  

<style>  
    .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 loading {  
    0% {  
        transform: rotate(0deg)  
    }  
    100% {  
        transform: rotate(359deg)  
    }  
}  
</style>  
2021-07-13 15:20 负责人:DCloud_UNI_LXH 分享
已邀请:

最佳回复

DCloud_UNI_LXH

DCloud_UNI_LXH

临时解决方案:https://ask.dcloud.net.cn/question/126610?item_id=169027&rf=false

3***@qq.com

3***@qq.com (作者)

https://ext.dcloud.net.cn/plugin?id=315 这是原插件链接

3***@qq.com

3***@qq.com (作者)

顶个

DCloud_UNI_LXH

DCloud_UNI_LXH

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

DCloud_UNI_LXH

DCloud_UNI_LXH

3.2.0 alpha 已修复

该问题目前已经被锁定, 无法添加新回复