1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头 苹果下拉反弹

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

时间:2021-11-30 06:42:42

相关推荐

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

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

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

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

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

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

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

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

iScroll 文档:/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',//横向滚动条保持原生,纵向滚动条使用iScrollfadeScrollbars:true,//淡入淡出});

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。