淺談一下關於iscroll的使用心得


因為最近的項目所有頁面老板想做成蘋果原生那種上下拉動有回彈效果的體驗,瀏覽器自帶是沒有這種功能的,自己寫的話兼容性可能會出大問題,要適配安卓的各種機型實在是難,所以我還是選擇去使用移動端相對比較穩定的iscroll.js這個插件來實現。。

剛開始使用的是iscroll4的版本,確實坑很多,但又沒辦法,只要一點一點來填。后來項目快做完了,問題也解決的差不多了,聽到群里面有人開始在使用iscorll5的版本,性能還不錯,就是兼容性不強,低版本的安卓機可能體驗很不流暢,於是自己開始琢磨,就有了這篇文章。

以下是我在項目中的使用心得

 

iscoll4-------------------
iscrollText.js
 
需要使用這個文件配合使用 
把需要滾動的區域放置ul中
<div id = "wrapper">
    <ul>
    
    </ul>
</div>
css的樣式重點在於
#wrapper{
    width:100%;
    height:100%;
    position:absolute;
    z-index:1;
}
 
引入下面的js
var myScroll=new iScroll("wrapper",{
    hScrollbar:false, 
    vScrollbar:false,
    onScrollMove: function () {
         if((this.y < this.maxScrollY) && (this.pointY < 1)){
          this.scrollTo(0, this.maxScrollY, 400);
          return;
         } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
          this.scrollTo(0, 0, 400);
          return;
         }
    }
});
 
function Refresh() {
    setTimeout(function () {
        myScroll.refresh();
    }, 1000);
}
iscroll有個問題就是:它會與swiper的輪播圖沖突,只要輪播圖滑動就會直接跳鏈接,解決的方案就是給swiper里面配置一個阻止touchmove冒泡事件的屬性        touchMoveStopPropagation : false, 這樣就能解決問題。
 
iscroll5------------------------
 
index.html iscroll.js swiper.css swiper.js zepto.js
 
這是一個測試DOME,iscroll5使用結構和上述一樣,而且不會和swiper沖突,可以采用flexbox來布局,但在一些低端機上面會出現上下滑很卡頓的情況,目前不清楚是因為布局的原因還是iscroll5的原因,有待進一步測試。
 
----------------------------------------------------------------------------------------------------------------2016.9.12
 
1.頁面在移動端滾動條移動變得非常卡,最后加上了document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);滾動條變得很流暢  還可以加上css樣式 給scroll元素增加css樣式:-webkit-transform:translate3d(0,0,0);.
2.關於頁面在不刷新的情況下如果添加了新的模塊或者高度發生了變化會導致無法下拉的情況,使用iscroll5可以解決這個問題,就是在你觸發了變化的事件之后,加上 myscroll.refresh();  去調用它自帶的刷新方法。                                                                                                                   
                                                                                                                                                    ------------------------2016.10.8


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM