h5与mui开发app标题的滑动实现和样式追踪

Posted 逝年的我们

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5与mui开发app标题的滑动实现和样式追踪相关的知识,希望对你有一定的参考价值。

mui.init({
				gestureConfig: {
					longtap: true //默认为false
				},
				swipe:true, //启用右滑关闭功能
				pullRefresh : {
			    container:".mui-scroll-wrapper",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
			    down : {
			      height:50,//可选,默认50.触发下拉刷新拖动距离,
			      auto: true,//可选,默认false.首次加载自动下拉刷新一次
			      contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
			      contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
			      contentrefresh : "正在刷新..."//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
			    }
			  }
			});

 在下面预加载时可以对左右滑动到开关进行关闭js代码

mui.plusReady(function() {
                //mui(\'.mui-slider\').slider().setStopped(true); //禁止左右滑动关闭
                mui(\'.mui-scroll-wrapper\').scroll({
                deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006 
                });

    //mui-scroll-wrapper1左滑动监听
        document.getElementById(\'mui-scroll-wrapper1\').addEventListener("swiperight", function() {
            document.getElementById(\'xinzengMx\').classList.add("mui-hidden");
            document.getElementById(\'mingxi\').classList.remove("mui-active");
            document.getElementById(\'jibenxiangqing\').classList.add("mui-active");
        });
        //mui-scroll-wrapper2右滑动监听
        document.getElementById(\'mui-scroll-wrapper2\').addEventListener("swipeleft", function() {
            if(isactive == \'null\' || !isactive) {
                document.getElementById(\'xinzengMx\').classList.remove("mui-hidden");
                }
            document.getElementById(\'jibenxiangqing\').classList.remove("mui-active");
            document.getElementById(\'mingxi\').classList.add("mui-active");
        });
 });

html代码

###########

MUI各种手势事件:滑动、拖动、点击等

MUI集成了很多手势事件,单击、长按、滑动等等。

点击事件:
1. tap 单击屏幕
2. doubletap 双击屏幕
长按事件:
1. longtap 长按屏幕
2. hold 按住屏幕(为什么我想起了顶住屏幕)。。。
3.release 离开屏幕
滑动事件:
1. swipeleft 向左滑动
2. swiperight 向右滑动
3. swipeup 向上滑动
4. swipedown 向下滑动
拖动事件:
1. drastart 开始拖动
2.drag 拖动中
3. dragend 拖动结束

根据使用频率,mui默认会监听部分手势事件,如点击、滑动事件;为了开发出更高性能的moble App,mui支持用户根据实际业务需求,通过mui.init方法中的gestureConfig参数,配置具体需要监听的手势事件

注意:dragstart、drag、dragend 共用drag开关、swipeleft 、swiperight 、swipeup 、swipedown 共用swipe开关

关注公众号,回复c+兴趣的东西  24小时内即可领取学习。2T资料任君挑选!

 

以上是关于h5与mui开发app标题的滑动实现和样式追踪的主要内容,如果未能解决你的问题,请参考以下文章

利用 MUI开发app, 如何实现侧滑菜单及其主体部分上下滑动

H5+App开发框架汇总

H5+和mui开发的app,拍照完成后如何将拍到的照片在页面中形成预览图

基于mui的H5套壳APP开发web框架

更正HBuilder开发基于MUI的H5+ app中使用百度地图定位功能

利用MUI滑动进行利息计算(移动端APP显示)