關於MUI框架---返回頂部功能

最近用mui開發一個項目，遇到了不少的問題，當時也怪自己沒熟讀mui文檔，以至於出現問題找不到頭緒，下面我把這個返回頂部的功能說一下，mui有自己的方法來返回頂部，就是下邊這個方法

mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 1000);//滾動到頂部

其實還好吧，但是沒卵用，需要再加幾行代碼，下邊的代碼我也是網上找的，是自己改過的，下邊貼出來

var scrollToTopBox = document.getElementById('scrollToTop');
//返回按鈕tap
scrollToTopBox.addEventListener('tap', function(e) {
e.stopPropagation();
mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 1000);//滾動到頂部
window.scrollTo(0, 1000);
});

對了  沒錯 還得需要它自己的tap，來調用，很是無恥吧，這樣可以了，這樣的話兼容還是不夠的，再來加幾行代碼

//監聽div滾動，其實它這個是分別監聽兩個事件的，但是無恥的我讓安卓和IOS都用div滾動，這樣可以解決兼容性的問題，之前不兼容安卓，在安卓上不現實返回頂部按鈕，但是如果你要是想用mui寫的打包成APP的話，請看下邊 介紹，這兒只適用於兼容靠瀏覽器訪問的設備，不適合安裝軟件的使用

document.getElementById('pullrefresh').addEventListener('scrollend', function() {
if (mui('#pullrefresh').pullRefresh().y <= window.innerHeight * (-1) && scrollToTopBox.classList.contains('hide'))
scrollToTopBox.classList.remove('hide');
else if (mui('#pullrefresh').pullRefresh().y > window.innerHeight * (-1) && !scrollToTopBox.classList.contains('hide'))
scrollToTopBox.classList.add('hide');
});

在這兒貼出來在APP上返回頂部按鈕的兼容代碼，砸門需要再加幾行，下邊這個是在安卓監聽body滾動的，上邊那個是在IOS監聽div滾動：

var scrollToTopBox = document.getElementById('scrollToTop'); //返回按鈕tap scrollToTopBox.addEventListener('tap', function(e) { e.stopPropagation(); mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);//滾動到頂部 }); //Android上監聽原生滾動，iOS上監聽div滾動，上拉超過一屏后顯示按鈕，否則隱藏，可自行在條件判斷中修改 if (mui.os.android) { window.addEventListener('scroll', function(e) { if (window.pageYOffset >= window.innerHeight && scrollToTopBox.classList.contains('hide')) scrollToTopBox.classList.remove('hide'); else if (window.pageYOffset < window.innerHeight && !scrollToTopBox.classList.contains('hide')) scrollToTopBox.classList.add('hide'); }); } else { document.getElementById('pullrefresh').addEventListener('scroll', function() { if (mui('#pullrefresh').pullRefresh().y <= window.innerHeight * (-1) && scrollToTopBox.classList.contains('hide')) scrollToTopBox.classList.remove('hide'); else if (mui('#pullrefresh').pullRefresh().y > window.innerHeight * (-1) && !scrollToTopBox.classList.contains('hide')) scrollToTopBox.classList.add('hide'); }); }

下邊總結下以上代碼：完整的，哈哈，被騙了吧，完整的代碼如下

html 部分：

<a id="scrollToTop" class="backTop hide"> <span class="mui-icon mui-icon-arrowup"></span> </a>

CSS  部分：

.hide { display: none; } .backTop { background: #DDDDDD; border-radius: 50%; position: fixed; right: 10px; bottom: 15px; width: 38px; height: 38px; z-index: 9999; text-align: center; font-size: 18px; color: #666666; padding-top: 8px; opacity: 0.8; }

js 部分：

var scrollToTopBox = document.getElementById('scrollToTop'); //返回按鈕tap scrollToTopBox.addEventListener('tap', function(e) { e.stopPropagation(); mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);//滾動到頂部 }); //Android上監聽原生滾動，iOS上監聽div滾動，上拉超過一屏后顯示按鈕，否則隱藏，可自行在條件判斷中修改 if (mui.os.android) { window.addEventListener('scroll', function(e) { if (window.pageYOffset >= window.innerHeight && scrollToTopBox.classList.contains('hide')) scrollToTopBox.classList.remove('hide'); else if (window.pageYOffset < window.innerHeight && !scrollToTopBox.classList.contains('hide')) scrollToTopBox.classList.add('hide'); }); } else { document.getElementById('pullrefresh').addEventListener('scroll', function() { if (mui('#pullrefresh').pullRefresh().y <= window.innerHeight * (-1) && scrollToTopBox.classList.contains('hide')) scrollToTopBox.classList.remove('hide'); else if (mui('#pullrefresh').pullRefresh().y > window.innerHeight * (-1) && !scrollToTopBox.classList.contains('hide')) scrollToTopBox.classList.add('hide'); }); }

 

備注：如果不是打包APP請在完整代碼中把安卓監聽部分去掉就可以解決兼容性問題，因為，打包成APP安卓監聽部分才會生效，mui滿滿的都是坑啊！