首页 > Web开发 > 详细

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

时间:2016-01-15 15:55:45      阅读:131      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!