Question

我有一个带有jquerymobile数据过滤器的listview，我正在使用iscroll。在使用datafilter进行搜索后，我想重新加载Iscroll，因为它没有调整可滚动区域的大小。（因此可以滚动远离项目）

这是我的HTML：

        <div id="mywrapper" class="wrapper">
            <div data-role="content" id="myscroller">
                <ul data-role="listview" id="lstvw_myitems" data-filter="true"></ul>
            </div>
        </div>

我已经尝试将更改事件绑定到listvw_myitems更改但似乎没有被调用。

这是我尝试过的：

$('#lstvw_myitems').change(function() {
      loadIScroll('wrapper');
});

我可以尝试在listview上捕获其他（jquery）事件吗？

这是我使用的Iscroll代码。（超时是为了修复iscroll加载时的错误，另一个代码是为了防止在滚动时选择。）

function loadIScroll(wrapperId){
setTimeout(function () {
    var myScroll = new iScroll(wrapperId, {bounce: false, hScrollbar: false, vScrollbar: false, vScroll: true, useTransform: true, zoom: false,
        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();
        }
    });
    }, 1);

}

我正在使用jqm 1.3 jq 1.9.1和iscroll v4.2.5。

Answer 1

我没有在列表对象上查找事件，而是更改了我的代码以在搜索输入框中查找输入。

以下是一个例子：

$(document).on('pagebeforeshow',"*", function(e, data){
//bind keypress of datafilter to resize iscroll
$('.ui-input-search > input').bind("keyup",function(){
    myScroll.refresh();
});

}）;

注意：必须在范围内使用Iscroll var来刷新它。由于*选择器总是调用此事件，使用另一个选择器会更好。我也不知道＆＃39; .ui-input-search＆gt;输入＆＃39;选择器足以覆盖那些搜索输入框。

也许别人会想出更好的解决方案！

Answer 2

我也试图这样做。它是一个很长的列表，一旦有人输入数据，我的Iscroll就不会调整大小。我尝试了你的方法，我不是100％肯定我理解。任何建议我会很高兴。

这是我的iscroll代码：

  var myScroll;
var scroll_cookie = readCookie('scrollToAlt');
var back_cookie = readCookie('previousPagePath');
function loaded() 
   {
   myScroll = new iScroll('wrapper',
       {scrollbarClass: 'myScrollbar',
            hideScrollbar:false,
       });
        if ($('#scroller').height() <= $('#wrapper').height()){
           myScroll.destroy();
           myScroll = null;
        }
   }
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

$(document).on('pagebeforeshow',"*", function(e, data){
    //bind keypress of datafilter to resize iscroll
    $('.ui-input-search > input').bind("keyup",function(){
    myScroll.refresh();
    });
});

如何在jqm datafilter更改后重新加载Iscroll？

2 个答案: