H5移动端，下拉刷新PullToRefresh

最新推荐文章于 2025-11-28 18:40:15 发布

原创最新推荐文章于 2025-11-28 18:40:15 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了在使用PullToRefresh.js库实现自定义下拉刷新功能时遇到的问题及解决方案。当刷新元素为null导致报错，原因是init函数调用过早，DOM节点未生成。通过监听页面渲染完成，利用Vue的nextTick确保在DOM更新后初始化插件，成功解决了问题。

用的库-PullToRefresh

GitHub - BoxFactura/pulltorefresh.js: A quick and powerful plugin for your pull-to-refresh needs in your webapp.

前言：下拉刷新分为两种，1.以body为刷新元素 2.自定义刷新元素

本次需求为2

问题点：刷新元素为null,报错

附代码

onMounted(() => {
    PullToRefresh.init({
        mainElement: '#main',
        triggerElement: '#main',
        onRefresh: function (cb) {
           setTimeout(function () {
             cb();
           }, 1500);
         },
         shouldPullToRefresh: function(){
            return !this.mainElement.scrollTop;
         }
    });
})

原因：init函数初始化早了，页面可能没生成DOM节点，因此init函数应该在页面生成DOM之后调用

//allReady为页面渲染条件
watch(allReady, value => {
  nextTick(() => {
    if (value) {
      PullToRefresh.init({
        mainElement: '#main',
        triggerElement: '#main',
        onRefresh: function (cb) {
          setTimeout(function () {
            cb();
          }, 1500);
        },
        shouldPullToRefresh: function(){
          return !this.mainElement.scrollTop;
        }
      });
    }
  })
})

ok,大功告成~~