公司项目需要上拉刷新功能,
mui下拉刷新组件采用固定布局,无法触发浏览器自带的隐藏地址栏功能。
思路:
touchmove事件监听程序中,判断滚动位置:上下顶点使用transform 移动最外层容器实现回弹。
缺点:有标题栏和分类导航栏 fixed 到顶部,会失效。
解决办法:transform换成relative,设置bottom实现移动。
上拉加载、下拉刷新插件:dropload.js
**************************************
近来,上网发现固定占满屏幕的布局,上滑也可以隐藏地址栏,只需要在页面加载完后加上如下代码即可:
if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
};
setTimeout(function() {
window.scrollTo(0, 1)
}, 0);