通过JS填充DOM元素再实例化的iScroll对象不能正常运行，求救.

Question

var viewBasic = {
container:"#data-box",
options:{
option:null,
product_type:'pc',
list_type:'harvesting',
resource_type:'tmr',
Period_time:null
},
scroll:function(scrollId){
 return new iScroll(scrollId, {snap: 'li',momentum: false,hScroll:true,hScrollbar: false,vScrollbar: false });
}
};
function tickerPage(){
this.url = '';
this.columns=['AUTO','LIFE'];
this.players=[null,null];
this.scrolls=[null,null];
};
tickerPage.prototype = viewBasic;
tickerPage.prototype.afterEnd = function(){

this.tickerDataDemo();
/*初始化 滚动条 */
var o = this;
setTimeout(function(){
for(var i=0; i< o.columns.length; i++){
o.scrolls[i] = o.scroll('listScroller_'+i);
}
},300);
};
tickerPage.prototype.tickerDataDemo = function(){
var o = this,str = "";
str +=' <div id="data-list">';
for(var i=0; i< o.columns.length; i++){
  str +=' <div class="data-list-item">';
  str +=' <div class="data-list-bar">';
  str +=' <label>'+o.columns[i]+'</label>';
  str +=' </div>';
  str +=' <div class="data-list-content">';
str +=' <div class="wrapper" id="listScroller_'+i+'">';
str +='<div class="scroller"><ul></ul></div>';
str +=' </div>';
  str +=' </div>';
  str +=' </div>';
}  
str +=' </div>';
$(this.container).html(str);
       /* 模拟数据 begin*/
        var dom = new Array;
         for(var j=0; j<20; j++){
            dom.pushu( "<li>test example ...</li>")
        }
        /* 模拟数据 end*/
         for(var i=0; i<2; i++){
              o.addItems(i,dom) 
         }
}
tickerPage.prototype.addItems = function(i,dom){
var o = this,target = $("#listScroller_"+i+" > .scroller:first");
var elms = "",w = target.width();
for(var n=0; n<dom.length; n++){
elms += dom[n];
}
/*

1：向前填充数据
2：修改上下错落样式 --> 修改容器宽度
3：滚动条移动到第一个元素

*/

$("ul:first",target).prepend(elms);
o.setItemsPadding(target);
var unitWidth = $("li",target).length == 0 ? 0:$("li:first",target).width();
var wrapperWidth = w +  unitWidth * dom.length;
target.width(wrapperWidth);

if(o.scrolls[i]){
o.scrolls[i].refresh;
o.scrolls[i].scrollToElement('li:nth-child(1)',800);
}}var view = new tickerPage()
      view.tickerDataDemo() 

通过以上方法实例化出来的 iscroll 对象不能正常工作。不知道是哪里的问题
虽然有点长，还是希望大家可以看完他

Answer 1

如果我没看错的话，最后addItem的时候你传到scroll:function(scrollId)这里的scrollId是0,1吧？这里对么？我用过iScroll记得第一个参数传的是一个DOM节点。就算可以传DOM节点的ID，你这里传进去的是0跟1，也找不到这样的DOM节点吧？

Answer 2

。。不对不对。。你进行iScroll初始化的地方只有afterEnd这个方法，，但是我全篇都没看到你调用这个方法o.setItemsPadding(target);这个方法也没看到哎。。

Answer 3

谢谢楼上的朋友如此细心。先把代码更正如下。依旧不太正常var viewBasic = {
    container:"#data-box",
    options:{
        option:null,
        product_type:'pc',
        list_type:'harvesting',
        resource_type:'tmr',
        Period_time:null
    },
    scroll:function(scrollId){
         return new iScroll(scrollId, {snap: 'li',momentum: false,hScroll:true,hScrollbar: false,vScrollbar: false });
    }
};
 
 
function tickerPage(){
    this.url = '';
    this.columns=['AUTO','LIFE'];
    this.players=[null,null];
    this.scrolls=[null,null];
};
tickerPage.prototype = viewBasic;
tickerPage.prototype.tickerDataDemo = function(){
    var o = this,str = "";
    str +=' <div id="data-list">';
    for(var i=0; i< o.columns.length; i++){
      str +=' <div class="data-list-item">';
          str +=' <div class="data-list-bar">';
              str +=' <label>'+o.columns[i]+'</label>';
          str +=' </div>';
          str +=' <div class="data-list-content">';
                str +=' <div class="wrapper" id="listScroller_'+i+'">';
                    str +='<div class="scroller"><ul></ul></div>';
                str +=' </div>';
          str +=' </div>';
      str +=' </div>';
    }  
    str +=' </div>';
    $(o.container).html(str);
o.getData();

}
tickerPage.prototype.getData = function(){
       /* 模拟数据 begin*/
        var dom = new Array;
         for(var j=0; j<20; j++){
            dom.pushu( "<li>test example ...</li>")
        }
        /* 模拟数据 end*/
         for(var i=0; i<2; i++){
              o.addItems(i,dom) 
         }
}
tickerPage.prototype.addItems = function(i,dom){
    var o = this,target = $("#listScroller_"+i+" > .scroller:first");
    var elms = "",w = target.width();
    for(var n=0; n<dom.length; n++){
        elms += dom[n];
    }
    /*
         
        1：向前填充数据
        2：修改上下错落样式 --> 修改容器宽度
        3：滚动条移动到第一个元素
         
    */
     
    $("ul:first",target).prepend(elms);
    o.setItemsPadding(target);
    var unitWidth = $("li",target).length == 0 ? 0:$("li:first",target).width();
    var wrapperWidth = w +  unitWidth * dom.length;
    target.width(wrapperWidth);
     
    if(o.scrolls[i]){
        o.scrolls[i].refresh;
        o.scrolls[i].scrollToElement('li:nth-child(1)',800);
    }else{
//DOM元素填充完毕，滚动条尚未初始化的，在此初始化
setTimeout(function(){o.scrolls.push(o.scroll("listScroller_"+i));},300);
}
 
}
 
var view = new tickerPage()
view.tickerDataDemo();
setInterval(function(){view.getData()},5000) 

Answer 4

o.setItemsPadding(target);
这个方法我就没看到，跑到这里不会报错么？o.scrolls[i].refresh;
这是啥意思咧，难道refresh不是一个方法么？？还有new iScroll的时候第一个参数可以是dom的ID么？我前一段时间用过一次iScroll，貌似传的是具体的DOM节点。

Answer 5

o.setItemsPadding(target); 这行可以注释掉
下面是他们提供的案例代码var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function () {
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
}
 });
}document.addEventListener('DOMContentLoaded', loaded, false);