h5與mui開發app標題的滑動實現和樣式追蹤
阿新 • • 發佈:2018-11-29
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資料任君挑選!