环境:iPhone4S,在示例“关于”页面,有回弹效果,因为使用的是css3的代码,利用了硬件加速
-webkit-overflow-scrolling: touch;
效果如下图:
关键是该页面显示区域被页面的内容撑开了,但是当页面内容高度不足以撑开的时候,则没有回弹效果,
有什么办法可以做到让内容不足的页面也有回弹效果?
然后我又尝试了另外一种方法,两个webview,第二个webview设置bounce,如下:
_openw = plus.webview.create(id, id, {
scrollIndicator: 'none',
top: '44px',
position: 'top',
bounce: 'all',
});
但是,webview的bounce样式,会导致拉动后背景黑了一块,用户体验不好,如下图:
不知道是不是我打开方式不对,望高人解答。。。
7 个回复
DCloud_App_Array
可以尝试使用js来判断,如果内容高度不够(可通过scrollHeight和clientHeight判断),自动在后面添加空白div
蔡繁荣 (作者) - 发表是最好的记忆
这么重要的,关乎用户体验的,没人关注么。。。
DCloud_UNI_FXY
或者可以使用mui的区域滚动(scroll)控件。
M522828
JS:
var height =plus.display.resolutionHeight;
jQuery("#content").css({
"minHeight":(height-111) + 'px',
});
jQuery("#pullrefresh").css({
"height":(height-112) + 'px',
"top": 112 + 'px',
"bottom": "0px",
});
div:
<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="top:112px;">
<div id="content" class="mui-scroll">
</div>
</div>
设置内容层的最小高度大于滚动层的高度就可以实现回弹效果
AaronSun
dcloud果然不行,这些效果你给它一个属性,我们在openwebview的时候设置这个属性让它有这个效果就行了,还要自己去计算这些么,烦
蔡繁荣 (作者)
其实不需要自己计算的,我已经有解决方案
2015-08-11 17:15
超级赛亚人
回复 蔡繁荣:请问如何处理 O(∩_∩)O
2016-01-27 16:27
小云菜 - 相关代码及分享在http://www.cnblogs.com/phillyx
在内容高度达不到scroll滚动的高度(屏幕高度)时,可以使用这个解决方案
http://www.cnblogs.com/phillyx/p/4719336.html
1***@163.com
需要一个头部导航栏,不包裹在下面容器里;
然后内容父级容器设置为:
width: 100%;
height: 100%;
position: absolute;