TLZ
TLZ
  • 发布:2023-08-24 11:53
  • 更新:2023-08-24 17:10
  • 阅读:441

自定义scroll-view 安卓手机下拉一直触发复位事件怎么办

分类:uni-app

在微信开发者工具里没有问题,运行到手机app,因为写在复位方法@refresherrefresh改变refresher-triggered,手机端一直触发复位方法所以页面一直抖动。

<scroll-view scroll-y="true"  
         :refresher-enabled="true"  
          :refresher-threshold="100"   
            :refresher-triggered="scroll.trigger"  
             refresher-default-style="white"  
             :scroll-anchoring="true"  
             @refresherrefresh="onRefresh"  
            @refresherpulling="onPulling" >  
async onRefresh() {  
                this.scroll.trigger = false;  
            },
2023-08-24 11:53 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

等下拉结束后再改变refresher-triggered,加个延时

  • TLZ (作者)

    可是这个方法还是在拉下来的时候触发了,比如一直拉着不松手正常来说不触发,但他的定时器开始了,几秒后自动还原上去。还有个问题就是我手还点在那边,他还原后又触发onPulling onRefresh,不带停的

    2023-08-24 14:32

  • TLZ (作者)

    大佬有解决方案吗

    2023-08-24 14:33

  • 喜欢技术的前端

    回复 TLZ:

    @refresherrefresh EventHandle 自定义下拉刷新被触发

    @refresherrestore EventHandle 自定义下拉刷新被复位


    @refresherrestore 这个是复位的回调

    2023-08-24 14:42

  • TLZ (作者)

    回复 喜欢技术的前端: 大佬,@refresherrestore 这个复位是复位发生后触发的,就是我把 refresher-triggered绑定的值改为false才能触发,没法在里面改scroll.trigger,对我说的问题也没法影响。之前的逻辑是下拉松手的时候触发了refresherrefresh,在这个函数里把 this.scroll.trigger=false; 。但手机app运行下拉的瞬间就触发了这个方法,所有出现了问题。好像就app有问题,微信小程序这些都是没问题的

    2023-08-24 16:34

  • TLZ (作者)

    大佬,我想问问松手触发的事件是什么,app不一样吗,是我的代码问题吗

    2023-08-24 16:36

喜欢技术的前端

喜欢技术的前端 - QQ---445849201

你试试这种写法,(●'◡'●)

<template>  
    <view class="action">  
        <scroll-view scroll-y :style="'height:'+listHeight+'px;'"  @scrolltolower="getData"  
            :lower-threshold="100" :refresher-enabled="true" :refresher-triggered="triggered"  
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">  
            <view class="list" v-for="(item,index) in list" :key="index">  
                <view>{{item}}这是列表</view>  
            </view>  
        </scroll-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                scroll: {  
                    trigger: false  
                },  
                list: 20,  
                listHeight: uni.getSystemInfoSync().windowHeight,  
                triggered: false,  
                actived: false,  
            }  
        },  
        methods: {  
            onRefresh() {  
                console.log("自定义下拉刷新被触发");  
                let that = this;  
                if (that.actived) {  
                    return;  
                }  
                that.actived = true;  
                //界面下拉触发,triggered可能不是true,要设为true  
                if (!that.triggered) {  
                    that.triggered = true;  
                }  
                this.getData();  
            },  
            onRestore() {  
                console.log("自定义下拉刷新被复位");  
                this.triggered = false;  
                this.actived = false;  
                console.log("onRestore");  
            },  
            getData() {  
                let that = this  
                //这里是调用后台接口的方法数据  
                setTimeout(() => {  
                    this.triggered = false; //触发onRestore,并关闭刷新图标  
                    this.actived = false;  
                }, 1000)  
            }  
        }  
    }  
</script>  
<style>  
    .action {  
        padding: 30rpx;  
    }  
    .list {  
        padding: 30rpx 0;  
        border-bottom: 1px solid #ddd;  
    }  
</style>
  • TLZ (作者)

    woc,我怎么没想到成了大佬。谢谢大佬

    2023-08-24 17:51

  • TLZ (作者)

    感谢大佬

    2023-08-24 17:52

  • TLZ (作者)

    泰裤辣

    2023-08-24 17:53

  • 喜欢技术的前端

    回复 TLZ: 哈哈哈,解决了就好,不客气

    2023-08-24 17:55

  • TLZ (作者)

    为啥我这次下拉没触发onRefresh,是因为onPulling里没改变trigger吗

    2023-08-24 17:56

  • 喜欢技术的前端

    回复 TLZ: 在复位回调之后@refresherrestore 改变 trigger

    2023-08-24 18:00

  • TLZ (作者)

    回复 喜欢技术的前端: 好的学到了,谢谢大佬

    2023-08-24 18:05

要回复问题请先登录注册