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

時間 2019-11-09

標籤淺談一下關於 iscroll 使用心得简体版

原文原文鏈接

由於最近的項目全部頁面老闆想作成蘋果原生那種上下拉動有回彈效果的體驗，瀏覽器自帶是沒有這種功能的，本身寫的話兼容性可能會出大問題，要適配安卓的各類機型實在是難，因此我仍是選擇去使用移動端相對比較穩定的iscroll.js這個插件來實現。。javascript

剛開始使用的是iscroll4的版本，確實坑不少，但又沒辦法，只要一點一點來填。後來項目快作完了，問題也解決的差很少了，聽到羣裏面有人開始在使用iscorll5的版本，性能還不錯，就是兼容性不強，低版本的安卓機可能體驗很不流暢，因而本身開始琢磨，就有了這篇文章。css

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

iscoll4-------------------

更新了一下iscroll4的demo---------------------------------------------2016.11.14

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="reset.css"/>
		<style>
			#wrapper{
			    width:100%;
			    height:100%;
			    position:absolute;
			    z-index:1;
			}
			li{
				width: 100%;
				height: 100px;
				background: red;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div id = "wrapper">
		    <ul>
		    	<li></li>
		    	<li></li>
		    	<li></li>
		    	<li></li>
		    	<li></li>
		    	<li></li>
		    </ul>
		</div>
		<script src="iscroll.js"></script>
		<script type="text/javascript">
			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);
			}
		</script>
	</body>
</html>

其中的iscroll4.js和reset.css文件你們能夠從網上下載，這個demo是能夠跑起來的。　　java

須要使用這個文件配合使用

把須要滾動的區域放置ul中

<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, 這樣就能解決問題。

下面介紹iscroll5demo------------------------iscroll5的js你們能夠去網上下載

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" type="text/css" href="../reset.css"/>
        <!-- Link Swiper's CSS -->
        <link rel="stylesheet" href="../swiper.css">
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: blue;
        }
            header{
                /*position: fixed;
                top: 0;*/
                background: red;
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                z-index: 99;
            }
            #wrap{
                /*margin-top:40px;*/
                overflow: hidden;
            }
            section{
                background: green;
                height: 300px;
                margin-bottom: 1px;
                color: white;
            }
            /*#wrapper{
                position: absolute;
                height: 100%;
                width: 100%;
                z-index: 1;
            }*/
            html,body{
                height: 100%;
                overflow: hidden;
            }
        
            .box{
                display:box;
                display: -webkit-box;
                display: flex;
                display:-webkit-flex; 
                overflow: hidden; 
                flex-direction: column; 
                width: 100%;
                height:100%;
                -webkit-box-orient: vertical; 
            }
            #wrapper{
                overflow: hidden;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1; 
                
            }
    .swiper-container {
        width: 100%;
        height: 200px;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide a{
        width: 100%;
        height: 100%;
    }
        </style>
    </head>
    <body>
        <div class="box">
            <header>導航欄</header>
            <div id="wrapper">
                <div id="wrap">
                    <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><a href="../../3d熱氣球.html">Slide 1</a></div>
                            <div class="swiper-slide"><a href="../../3d熱氣球.html">Slide 2</a></div>
                            <div class="swiper-slide"><a href="../../3d熱氣球.html">Slide 3</a></div>
                            <div class="swiper-slide"><a href="../../3d熱氣球.html">Slide 4</a></div>
                        </div>
                        
                        <div class="swiper-pagination"></div>
                    </div>
                    <section>1</section>
                    <section>2</section>
                    <section>3</section>
                    <section>4</section>
                    <section>5</section>
                </div>
            </div>
        </div>
        <script src="zepto.js"></script>
        <script src="../swiper.js"></script>
        
        <script type="text/javascript" src="iscroll.js" ></script>
        <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true
        });
        var myscroll;
        function loaded(){
            setTimeout(function(){
                myscroll=new IScroll("#wrapper");
            },100 );
        }
        window.addEventListener("load",loaded,false);

        $("#wrapper").one("touchstart",function(){
            myscroll.refresh();
        });
        </script>
    </body>
</html>

index.html

這是一個測試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