luch
luch
  • 发布:2020-06-08 14:59
  • 更新:2020-09-16 11:14
  • 阅读:732

【报Bug】scroll-view轻轻往上一划就触发下拉刷新了??希望官方demo能具体一点

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows10

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: p20

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view>  
        <scroll-view  
            scroll-y  
            refresher-enabled  
            refresher-default-style="black"  
            refresher-background="#fff"  
            :refresher-triggered="regresherTriggered"  
            @scrolltolower="scrollBottomHandle"  
            @refresherrefresh="refresherrefreshHandle"  
            @refresherabort="refresherabortHandle"  
            @refresherrestore="refresherrestoreHandle"  
            @refresherpulling="refresherpullingHandle"  
            class="scroll-view-st"  
        >  
            <navigator url="./"><view v-for="item in dataList" :key="item.id" class="item-st">{{item.id}}</view></navigator>  
        </scroll-view>  
        <navigator open-type="navigateBack" :delta="1" class="sfs">back</navigator>  
    </view>  
</template>  

<script>  
let a = 0  
export default {  
    data() {  
        return {  
            regresherTriggered: false,  
            dataList: [],  
            loading: false,  
            freshing: false  
        }  
    },  
    onLoad() {  
        console.log('sss onload')  
        this.getList()  
    },  
    methods: {  
        // 滚定到底部触发  
        scrollBottomHandle() {  
            console.log('滚定到底部触发')  
            this.getList()  
        },  
        // 下拉刷新触发  
        refresherrefreshHandle() {  
            if (this.freshing) return  
            this.freshing = true  
            console.log('下拉刷新触发')  
            this.regresherTriggered = true  
            this.dataList = []  
            this.loading = false  
            a = 0  
            this.getList()  
        },  
        // 自定义下拉刷新被中止  
        refresherabortHandle() {  
            console.log('自定义下拉刷新被中止')  
        },  
        // 自定义下拉刷新被复位  
        refresherrestoreHandle() {  
            console.log(' 自定义下拉刷新被复位')  
            // this.regresherTriggered = 'restore'  
        },  
        // 自定义下拉刷新控件被下拉  
        refresherpullingHandle() {  
            console.log('自定义下拉刷新控件被下拉')  
        },  
        getList() {  
            console.log('调用了加载数据')  
            if (this.loading) return  
            this.loading = true  
            // this.regresherTriggered = true  
            setTimeout(() => {  
                console.log('请求道了数据')  
                let arr = []  
                a++  
                console.log('当前请求了第' + a + '页')  
                for (let i = 0; i < 15; i++) {  
                    arr.push({ id: `${a}-${i}` })  
                }  
                this.regresherTriggered = false  
                this.dataList = [...this.dataList, ...arr]  
                this.loading = false  
                this.freshing = false  
            }, 500)  
        }  
    }  
}  
</script>  

<style lang="scss">  
.scroll-view-st {  
    height: 100vh;  
}  
.item-st {  
    height: 180rpx;  
    background-color: green;  
    margin-bottom: 10rpx;  
}  
.sfs {  
    position: fixed;  
    left: 10rpx;  
    top: 50%;  
}  
</style>  

操作步骤:

运行如上代码,按BUG 描述 步骤即可复现

预期结果:

bug1:正常下滑不触发下拉刷新事件


bug2:兼容报错

实际结果:

bug1:轻轻往下一划就触发了下拉刷新

bug描述:

自定义基座运行:bug1:scroll-view 上拉触底加载到新一页的数据,往下轻轻一划就触发了下拉刷新事件?


bug2:上滑过程中,手指1安装屏幕,其次手指2按住屏幕,手指1松开屏幕,报错:Uncaught TypeError: Cannot read property 'y' of null at view.umd.min.js:6


bug3:@scrolltolower 似乎有时不触发?

2020-06-08 14:59 负责人:无 分享
已邀请:
林中木中林

林中木中林

研究了好久,突然灵光一闪,找到解决办法了,分享一下:
其实很简单

1- 将refresher-enabled绑定一个变量,初始值true refresher-enabled="scroll_refresher_enabled"

2 - 在scroll绑定的方法中,获取滚动值,===0开启下拉刷新,否则禁用
@scroll="scroll"
scroll(e) {
if (e.detail.scrollTop === 0) {
this.scroll_refresher_enabled = true
} else {
this.scroll_refresher_enabled = false
}
}

林中木中林

林中木中林

我也是遇到同样的问题,哎折腾好久找不到解决办法

要回复问题请先登录注册