uniapper

发布：2017-10-17 10:49
更新：2020-05-17 16:02
阅读：3276

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

分类：HTML5+

下拉刷新 Webview 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"

原生下拉与picker冲突.zip

原生下拉与picker冲突-代码.zip

2017-10-17 10:49 1 条评论负责人:无分享

9 个回复

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

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 (作者) - abc

顶一下

n***@gmail.com

上传附件demo看看

uniapper (作者)

老大，上传附件了。能给看看吗？

2017-10-20 16:26

uniapper (作者) - abc

@DCloud_MUI_near

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

pulltorefresh-sniper-20171017.zip

uniapper (作者) - abc

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

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

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

8***@qq.com

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

2017-12-04 15:42
苦苦的微笑

怎么才能监听到picker已关闭（本人小白）

2018-06-08 16:32

uniapper (作者) - abc

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

l***@qq.com

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

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

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

9 个回复

公告

相关问题

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

与内容相关的链接

9 个回复

公告

相关问题