豆腐果lyl
豆腐果lyl
  • 发布:2015-11-05 11:10
  • 更新:2016-07-16 15:49
  • 阅读:2723

【报Bug】安卓双webview下拉刷新,子webview包含picker插件,picker插件下滑失效

分类:MUI

需要在一个页面包含 下拉刷新列表、时间选择控件

当DtPicker面板显示出来的时候,上滑选择时间没问题,但是下滑选择时间,会导致整个子webview跟着下拉,从而导致DtPicker滚动失效

原生时间选择控件ios、安卓、安卓不同版本显示都不一样,很影响体验

找不到解决办法呀,希望给出解决方案

2015-11-05 11:10 分享
已邀请:

最佳回复

赵梦欢

赵梦欢 - 专注前端,乐于分享!

在打开选择器的时候控制上拉刷新禁止滚动,然后关闭的时候恢复滚动就可以。

上拉刷新下拉加载的启用禁止方法

mui('#pullrefresh').pullRefresh().setStopped(true); //暂时禁止滚动  
mui('#pullrefresh').pullRefresh().setStopped(false); //取消暂时禁止滚动  

mui('#pullrefresh').pullRefresh().disablePullupToRefresh();//禁用上拉加载  
mui('#pullrefresh').pullRefresh().enablePullupToRefresh();//启用上拉加载  

下拉刷新与日期选择插件冲突的解决方案
例如:

mui('.mui-table-view').on('tap','li',function(){  
    var dtpicker = new mui.DtPicker({  
      "type": "time",  
        "customData": {  
          "h": [  
           {  
              value: "am",  
              text: "上午"  
           }, {  
              value: "pm",  
              text: "下午"  
           },   
        ]  
     }  
    })  
    dtpicker.show(function(e) {  
        console.log(e);  
    })    
    // 暂时禁止滚动  
    mui('#pullrefresh').pullRefresh().setStopped(true);  
})    

mui('body').on('tap','.mui-backdrop',function(){  
    // 取消暂时禁止滚动  
    mui('#pullrefresh').pullRefresh().setStopped(false);  
})  
mui('body').on('tap','.mui-dtpicker-header',function(e){  
    var target = e.target;  
    if(target.tagName === 'BUTTON'){  
        // 取消暂时禁止滚动  
        mui('#pullrefresh').pullRefresh().setStopped(false);   
    }     
})  
DCloud_Android_ST

DCloud_Android_ST

你好 “当DtPicker面板显示出来的时候,上滑选择时间没问题,但是下滑选择时间,会导致整个子webview跟着下拉,从而导致DtPicker滚动失效” 这个问题出现在那个平台上,你的测试机型号是什么,这个问题光描述很难定位

  • 豆腐果lyl (作者)

    安卓系统才有这个问题,很容易定位,我在下面描述了一下,截了图,您看一下行不?

    2015-11-06 09:07

豆腐果lyl

豆腐果lyl (作者)

IOS一切正常, 安卓平台上才有这个问题

小米2S上,使用MUI7 系统。。。安卓5.0.2系统

华为P7-L09, EMUI3.0 系统。。。安卓4.4.2

华为C8817E, Emotion2.3 系统。。。安卓4.4.4

重现这个现象,只要在 pullrefresh_sub.html 这个页面调用 picker 或 DtPicker 其中一个组件就可以看到

弹出后的样子

向下滑动picker之后的样子,整个sub webview跟着被下拉了

DCloud_Android_ST

DCloud_Android_ST

你使用的是H5模式的日期选择,你可以尝试使用原生的
http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.pickDate

houfeng2016

houfeng2016

请提示测试代码

DCloud_UNI_FXY

DCloud_UNI_FXY

如果需要在弹出内容上滚动,需要在弹出时,pullRefresh().setStopped(true);
然后关闭了弹出内容后,需要再次调用pullRefresh().setStopped(false);

  • gengjun

    这个问题很好的解决了,谢谢。

    2015-11-11 16:01

gengjun

gengjun

我也遇到了类似的问题:如果子页面设置了下拉刷新操作,在子页面上弹出的弹出框或者picker在向下滑动时子页面会跟着滑动,我试着用webview.setPullToRefresh()暂时把下拉刷新给屏蔽了,但是没有成功,请官方人员解决,谢谢。

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