关于mui页面的dom,你需要知道如下规则。
固定栏靠前
所谓的固定栏,也就是带有mui-bar属性的节点,都是基于fixed定位的元素;常见组件包括:顶部导航栏(mui-bar-nav)、底部工具条(mui-bar-footer)、底部选项卡(mui-bar-tab);这些元素使用时需遵循一个规则:放在mui-content元素之前,即使是底部工具条和底部选项卡,也要放在mui-content之前,否则固定栏会遮住部分主内容;
### 一切内容都要包裹在mui-content中
除了固定栏之外,其它内容都要包裹在mui-content中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮罩,mui为了解决这个问题,定义了如下css代码:
[css] view plain copy
mui-bar-nav ~ mui-content {
padding-top: 44px;
}
mui-bar-footer ~ mui-content {
padding-bottom: 44px;
}
mui-bar-tab ~ mui-content {
padding-bottom: 50px;
}
你当然可以通过自定义CSS的方式实现如上类似效果,但为了使用简便,建议将除固定栏之外的所有内容,全部放在mui-content中。
始终为button按钮添加type属性
若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。
窗口管理
页面初始化:必须执行muiinit方法
mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次muiinit()方法;
页面跳转:抛弃href跳转
当浏览器加载一个新页面时,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越的体验障碍;为解决这个问题,建议使用[muiopenWindow方法](>两种方案:1、直接获取当前选中项的节点varelem=documentquerySelector('mui-table-view-radiomui-selected');consolelog(eleminnerText);2、监听列表式单选框的选择事件,如下:documentquerySelector('mui-table-viewmui-table-view-radio')addEventListener('selected',function(e){consolelog("当前选中的文本值为:"+edetailelinnerText);});要实现的功能是购物车图标在手机浏览器中,手指上滑渐渐显示,下滑渐渐消失,手指快速上下滑动,图标也能相应有闪现;
但是在苹果新系统中手指快速上下滑动,当开始惯性滚动时候无法监听到touch的相关事件,图标会一直显示或隐藏,这是不符合要求的。
最一开始考虑修改
属性控制元素在ios移动设备上是否使用滚动回d效果
auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
touch 使用具有回d效果的滚动当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
-webkit-overflow-scrolling:
touch;当手指从触摸屏上移开,会保持一段时间的滚动
-webkit-overflow-scrolling: auto;
当手指从触摸屏上移开,滚动会立即停止
但是关闭滚动惯性后,视觉上拖动的太慢了,不满足预期
继续想办法
观察发现,手指快速上下滑动监听不到touch相关事件的时候,滚动条是在一直滑动的,是可以监听到scroll事件的
如果把页面的scroll改为,由触摸事件(Touch)计算偏移量 和 CSS3动画(Transform,Transition)移动偏移量来实现,取消scroll,就不会出现惯性滚动了
这里我用了mui框架scroll(区域滚动)来实现,它不是用scroll来实现滚动的,而是监听滑动偏移量,然后使用Transform,Transition来实现滚动效果,正好是我需要的。
使用mui参考
>mui相关的一些控件是通过拦截a标签上的href来实现的,所以muijs会阻止a标签上的href跳转,因此需使用JS对标签添加事件监听。muiopenWindow()对运行环境进行判定,5+环境会打开新的webview,普通手机浏览器环境会进行windowlocationhref跳转。muiinit({
beforeback: function() {
//获得父页面的webview
var list = pluswebviewcurrentWebview()opener();
//触发父页面的自定义事件(refresh),从而进行刷新
muifire(list, 'refresh');
//返回true,继续页面关闭逻辑
return true;
}
});
在父页面中添加事件监听
windowaddEventListener('refresh', function(e){//执行刷新 locationreload();});当虚拟键盘d出的时候,window的resize事件会被触发(至少我的Android手机是这样) 问题里的input是使用position:fixed吗,如果是position: fixed,在resize触发时应该会自动调整位置吧。 // 以下代码用于直接将文档流中的元素移动到视区内,And
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)