chjtx / JRoll

Smooth scrolling for the mobile web
http://www.chjtx.com/JRoll/
MIT License
460 stars 91 forks source link

请问一下jroll-infinite能不能不使用template选项,而只使用加载成功和加载失败等钩子函数? #53

Closed Yeung2017 closed 6 years ago

Yeung2017 commented 6 years ago

作者你好 我比较了iscroll5.js、better-scroll.js、mescroll.js以及jroll.js,发现每个插件都有点小缺陷,不过jroll.js的性能是最好的,也是最接近完美的 但是在使用jroll.js的上拉加载的时候遇到了一点问题 我是在vue中使用的,我觉得jroll-vue-infinite不太方便,所以我想直接使用jroll-infinite.js 因为,实际上,vue能够很好地帮助我完成dom的渲染 于是我只需要告诉jroll我已经成功或未成功取得数据,让vue做vue的,让jroll做jroll的

现在的情况是infinite初始化以后,即使vm.list不为空,也没有对应的dom渲染出来

相关代码

// 初始化上拉加载
initInfinite: function () {
  myScroll.infinite({
    getData: function (page, callback, errorCallback) {
      vm.list = [1,2,3,4];
      fp.delay(1000, function () {
         //完成加载数据的操作后回调执行callback方法
        callback();
      });
    }
  });
}

我猜测是因为jroll后于vue更新了dom,于是我又做了以下测试:

相关代码

// 初始化上拉加载
initInfinite: function () {
  myScroll.infinite({
    getData: function (page, callback, errorCallback) {
      fp.delay(1000, function () {
         //完成加载数据的操作后回调执行callback方法
        callback();
      });
     fp.delay(2000, function () {
         //2000ms以后再更新vm.list
        vm.list = [1,2,3,4];
      });
    }
  });
}

发现还是没有相关dom被渲染出来

有这种操作吗?

综上: 能不能不使用template选项,而只使用加载成功和加载失败等钩子函数?

chjtx commented 6 years ago

jroll-infinite是直接操作innerHTML更新列表的,与vue不太搭,所以才弄了个jroll-vue-infinite,但是我当时对vue还不太熟,将jroll-vue-infinite设计得有点四不象,最近抽个时间搞个jroll-vue-infinite2吧

chjtx commented 6 years ago

好了,https://github.com/chjtx/JRoll/tree/master/extends/jroll-vue-infinite2第二版的使用方式应该会更符合vue组件规范

Yeung2017 commented 6 years ago

@chjtx 太棒了,等忙完了立即试一下