浅谈一下关于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