码迷,mamicode.com
首页 > Web开发 > 详细

JQuery Mobile iscroll插件使用教程及注意事项

时间:2016-01-15 15:58:21      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

中文文档:http://www.360doc.com/content/14/0724/11/16276861_396699901.shtml

 

问题:使用了iscroll之后,你会发现点击输入框时不灵敏,经常无法聚焦;页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为 ,包含在wrapper中的input、Seclect控件无法选择或点击

解决办法:
在创建Scorll时,定义以下方法

onBeforeScrollStart: function (e) { 
var target = e.target; 
while (target.nodeType != 1) target = target.parentNode; 
if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’) 
e.preventDefault(); 
}, 

完整代码:

/**
 * 初始化iScroll控件
 */
function loaded() {
    pullUpEl = document.getElementById(‘pullUp‘);
    pullUpOffset = pullUpEl.offsetHeight;
    myScroll = new iScroll(‘wrapper‘, {
        useTransition: false, /* 防止更新时闪动 */
        topOffset: pullDownOffset,
        onRefresh: function () {
            if (pullUpEl.className.match(‘loading‘)) {
                pullUpEl.className = ‘tips‘;
                pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘上拉加载更多...‘;
            }
        },
        onScrollMove: function () {
            if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match(‘flip‘)) {
                pullUpEl.className = ‘flip tips‘;
                pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘松手开始更新...‘;
                this.maxScrollY = this.maxScrollY;
            } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match(‘flip‘)) {
                pullUpEl.className = ‘tips‘;
                pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘上拉加载更多...‘;
                this.maxScrollY = pullUpOffset;
            }
        },
        onScrollEnd: function () {
            if (pullUpEl.className.match(‘flip‘)) {
                pullUpEl.className = ‘loading tips‘;
                pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘加载中...‘;                
                pullUpAction();    // Execute custom function (ajax call?)
            }
        },
        onBeforeScrollStart: function (e) {
            var target = e.target;
            while (target.nodeType != 1) target = target.parentNode;
            if (target.tagName != ‘SELECT‘ && target.tagName != ‘INPUT‘ && target.tagName != ‘TEXTAREA‘)
            e.preventDefault();
        }
    });
    
    setTimeout(function () { document.getElementById(‘wrapper‘).style.left = ‘0‘; }, 500);
}

document.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }, false);
document.addEventListener(‘DOMContentLoaded‘, loaded, false); //初始化绑定iScroll控件 

 

JQuery Mobile iscroll插件使用教程及注意事项

标签:

原文地址:http://www.cnblogs.com/forever-cjs/p/5133190.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!