iScroll.js使用

最新推荐文章于 2025-03-11 13:56:43 发布

原创最新推荐文章于 2025-03-11 13:56:43 发布 · 828 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #移动 #iscroll

1个多月没做项目，一个引用下拉加载功能，做了一天多。
这里写图片描述

代码：http://runjs.cn/code/agvervd3

总结

以下是我在移动微信端遇到问题：

//如果想刷新整个页面，或者整个页面包含多个元素就应该在wrapper下再加一个scroller，把所有代码丢到scroller下面。
<div id="wrapper">
    <div id="scroller">
    //你的代码元素。
    </div>
</div>

//原生js写法
document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false);

//用jQuery这么写
$(document).ready(function() {
    // ...代码...
});

//我用原生的写法得不到以下id，用jQuery这种写法可以得到以下id。
pullUpEl = document.getElementById('pullUp');

//移动端使用去掉句代码，不然页面滑不动
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

//必须引用css，且top和bottomm必须设置，否则在移动端滑动时会出问题。
#wrapper{
    position: absolute;
    left: 0;
    top: 50px;
    bottom: 50px;
    width: 100%;
    background-color: #fafafa;
    z-index: 10;
}

如果只想要上拉刷新效果：
在iScroll.js的_pos方法下加个判断，判断y是否小于0，如果大于0就是下拉，如果小于0就是上拉。（但是如果有document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);这句代码这个判断会失效。因为不管是上拉还是下拉都会有一个状态是y=0）
这里写图片描述

最后附上我的移动微信端的下拉代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script src="js/common/iscroll.js"></script>
    <style>        
        #wrapper{
            position: absolute;
            left: 0;
            top: 0px;
            bottom: 0px;
            width: 100%;
            background-color: #fafafa;
            z-index: 10;
        }
        #pullDown, #pullUp {
            background:#fff;
            height:40px;
            line-height:40px;
            padding:5px 10px;
            font-size:14px;
            color:#8F8F8F;
            text-align: center
        }
    </style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
    //我的代码
     <div id="pullUp">
        <span class="pullUpLabel">上拉加载更多...</span>
    </div>
</div>
</div>
</body>
<script src="js/course/index/zepto.js"></script>
<script src="js/course/index/main.js"></script>
</html>

main.js

var myScroll,pullUpEl, pullUpOffset;
$(document).ready(function() {
pullUpEl = document.getElementById('pullUp');   
pullUpOffset = pullUpEl.offsetHeight;       
/**
 * 初始化iScroll控件
 */
myScroll = new iScroll('wrapper', {
vScrollbar:false,
onRefresh : function () {
if (pullUpEl.className.match('loading')) {
    pullUpEl.className = '';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
}
},
onScrollMove: function () {
if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
    pullUpEl.className = 'flip';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
    }
},
onScrollEnd: function () {
if (pullUpEl.className.match('flip')) {
    pullUpEl.className = 'loading';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';                
    getRecommend();
}
}
});
});