移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹

最新推荐文章于 2024-04-28 16:33:37 发布

青柠知秋

最新推荐文章于 2024-04-28 16:33:37 发布

阅读量4.2k

点赞数

分类专栏：移动App 文章标签： iscroll 阻止下拉刷新固定行表头

本文链接：https://blog.csdn.net/zbl744949461/article/details/89024746

版权

移动App 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

此方法在安卓6的自带下拉刷新的APP内无效。

做移动app项目时，用的是app内嵌webview的方法，遇到问题。

在安卓6中，app原生自带下拉刷新，与界面内的下滑冲突。

开始考虑通过在touchmove时阻止默认事件解决，但event.preventDefault()是会把所有事件都阻止了。

即使阻止完再移除监听事件，也不行，这是个持续的过程，因为无法改变APP的原生内容。此路不通。

建议让开发app的人员解决这个问题。如果此路不通，考虑其他方法。

考虑用iScroll插件解决，插件iScroll的原理是通过css的transform效果实现。

iScroll 文档：http://caibaojian.com/iscroll-5/

demo：固定表头滚动（移动端）如果表格很长，不止需要纵向滚动，还需要横向和表头一起滚动。

html:

<head><script src="js/iscroll-probe.js"></script></head>
<div id="c">
    <div class="m">sdmdonifoinvomsldmkcoerijoaopmr</div>
    <div class="f">
        <ul class="d">
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    </div>
</div>

css：

这里 body 要加属性 position:fixed; 防止苹果手机下拉反弹问题。

这里 f 的 overflow-y 要设置成hidden，因为苹果手机兼容问题。

html,body,div,ul,li{
    margin:0;
    padding:0;
}
#c{
    position:relative;
    width:500px;
    background-color: #f5e79e;
    overflow-y:hidden;
    overflow-x:auto;
}
.m{
    width:600px;
    height:50px;
    background-color: #2d6ca2;
}
.f{
    position:relative;
    width:600px;
    height:400px;
    background-color: #2ECC40;
    overflow-y:auto;
}
.d{
    width:600px;
    height:800px;
    background-color: #cccccc;
}
li{
    display:block;
    height:100px;
    list-style: none;
    font-size:28px;
}

js：

var myScroll=new IScroll(".f",{
    scrollbars: true,//显示滚动条
    bounce:false,//反弹动画不显示
    eventPassthrough:'horizontal',//横向滚动条保持原生，纵向滚动条使用iScroll
    fadeScrollbars:true,//淡入淡出
});

自己做过尝试，通过阻止默认事件，改变要滚动元素的margin-top或者top，来做滚动效果，但在touchmove时，没能精准计算出移动距离。做个纪念吧。。。