蔡繁荣
蔡繁荣
  • 发布:2015-03-23 23:12
  • 更新:2018-09-28 15:02
  • 阅读:7781

页面内容不够撑开时,如何开启滚动回弹效果,非webview的bounce样式

分类:MUI

环境: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样式,会导致拉动后背景黑了一块,用户体验不好,如下图:

不知道是不是我打开方式不对,望高人解答。。。

2015-03-23 23:12 负责人:无 分享
已邀请:
DCloud_App_Array

DCloud_App_Array

可以尝试使用js来判断,如果内容高度不够(可通过scrollHeight和clientHeight判断),自动在后面添加空白div

蔡繁荣

蔡繁荣 (作者) - 发表是最好的记忆

这么重要的,关乎用户体验的,没人关注么。。。

DCloud_UNI_FXY

DCloud_UNI_FXY

或者可以使用mui的区域滚动(scroll)控件。

M522828

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

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

1***@163.com

需要一个头部导航栏,不包裹在下面容器里;
然后内容父级容器设置为:
width: 100%;
height: 100%;
position: absolute;

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