uniapper
uniapper
  • 发布:2017-10-17 10:49
  • 更新:2020-05-17 16:02
  • 阅读:1951

【问题:原生下拉刷新】setPullToRefresh() 后,页面中向下拖动的dom无法拖动。

分类:HTML5+

setPullToRefresh() 后,页面中向下拖动的dom无法拖动。
项目中有个页面,既需要下拉刷新,又需要一个div可以在页面中上下拖动。
但是设置了下拉刷新后,该div无法向下拖动。因为只要下拉无论是否按在div上,都会直接只触发页面的下拉刷。
怎么办?
=================== 2017/10/20 更新问题 =================================
@DCloud_Android_磊子 @DCloud_App_Array
好吧我换个demo。
官方的HelloMui(见附件)。
的Picker。若picker页面使用 webview.setPullToRefresh()。设置为可原生下拉刷新。

那么在乡下滚动 picker控件时,会与下拉刷新冲突!!!

在hb中新建hellomui工程

文件index.html 大约 766行后添加如下代码。

                    var webview = plus.webview.getWebviewById(id);  
                    webview.setPullToRefresh({support:true,style:'circle',offset:'45px'},  
                    function(){  
                        setTimeout(function(){  
                            webview.endPullToRefresh();  
                        }, 1000);  
                    }  
                    );

实际冲突效果见附件的“原生下拉与picker冲突.zip"(这是我录的屏,附件不让传MP4所以压缩了)。

测试代码键附件“原生下拉与picker冲突-代码.zip"

2017-10-17 10:49 1 条评论 负责人:无 分享
已邀请:
五叶神

五叶神 - 世界上没有免费的午餐,也不要有一颗贪婪的心

mui-scroll内部应该是阻止了默认滚动事件的,你可以考虑嵌套scroll,我的项目里面是用了swiper.js滚动的,在上拉加载下拉刷新内嵌套了左右上下滚动。

<div id="pullrefresh" class="mui-content mui-scroll-wrapper has-fixed">  
    <div class="mui-scroll">  
        <div class="swiper-container">  
            <div class="swiper-wrapper">  
                <table class="custom-table swiper-slide">  
                </table>  
            </div>  
        </div>        
    </div>  
</div>

你可以做个小测试

  • uniapper (作者)

    我时用的原生下拉刷新,没用mui(不是拖动div而是拖动webview刷新)

    2017-10-17 16:36

uniapper

uniapper (作者) - abc

顶一下

nearwmy@gmail.com

nearwmy@gmail.com

上传附件demo看看

  • uniapper (作者)

    老大,上传附件了。能给看看吗?

    2017-10-20 16:26

uniapper

uniapper (作者) - abc

@DCloud_MUI_near

弄了个很简陋的拖动,你可以通过在代码中关闭和开启下拉刷新试试。
按常理,下拉刷新不能影响文档中 dom的上下拖动才对。

uniapper

uniapper (作者) - abc

@DCloud_MUI_near @DCloud_Android_磊子 @DCloud_IOS_XTY
请问这个原生下拉问题,我提供的demo测试的怎么样了?

uniapper

uniapper (作者) - abc

晕,问题更新后排名不变。那就在加个评论。顶一下。

@DCloud_Android_磊子 @DCloud_App_Array
好吧我换个demo。
官方的HelloMui(见附件)。
的Picker。若picker页面使用 webview.setPullToRefresh()。设置为可原生下拉刷新。

那么在乡下滚动 picker控件时,会与下拉刷新冲突!!!

在hb中新建hellomui工程

文件index.html 大约 766行后添加如下代码。

                    var webview = plus.webview.getWebviewById(id);  
                    webview.setPullToRefresh({support:true,style:'circle',offset:'45px'},  
                    function(){  
                        setTimeout(function(){  
                            webview.endPullToRefresh();  
                        }, 1000);  
                    }  
                    );

实际冲突效果见附件的“原生下拉与picker冲突.zip"(这是我录的屏,附件不让传MP4所以压缩了)。

测试代码键附件“原生下拉与picker冲突-代码.zip"

Neil_HL

Neil_HL

webview设置了下拉刷新后,当页面处于顶部时,向下拉动,会触发webview的下拉刷新,由于原生优先,所以你的dom就没法滑动的。
建议:1.设置了原生下拉刷新就尽量不要在页面顶部有其他的下拉操作;
2.你这里的情况可以做个判断,当弹出picker时,关闭原生的下拉刷新,关闭picker后恢复下拉刷新。

  • 836890151@qq.com

    怎么临时关闭mui的下拉刷新

    2017-12-04 15:42

  • 苦苦的微笑

    怎么才能监听到picker已关闭(本人小白)

    2018-06-08 16:32

uniapper

uniapper (作者) - abc

@DCloud_MUI_Neil
根据页面内是否又需要向下拖动的元素来开关原生下拉刷新,确实是一个变通的方法。要是能在setPullToRefresh()函数中提供一个设置,让页面中的向下拖动的元素在 touchmove事件中可以通过
event.stopPropagation()禁止touchmove事件冒泡来在当前元素上阻止下拉刷新,可能操作更流畅。

lverea@qq.com

lverea@qq.com

我奇怪的是,我的什么首页下拉刷新,和其他页面的下拉刷新不是一个风格呢?子页面都是圆圈加载,首页是灰色背景文字提示,而且子页面的滚动区正常能用,页面处于顶部才触发原生下拉刷新,而首页无法滚动,一下拉就TM刷新~,从子页面的webview跳转到首页时,就能正常滚动页面,触发的下来刷新也是圆圈类型的;下拉刷新有两种style吗?

要回复问题请先登录注册