1. 程式人生 > >h5與mui開發app標題的滑動實現和樣式追蹤

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資料任君挑選!