H5移动端，下拉刷新PullToRefresh

最新推荐文章于 2024-05-13 09:56:20 发布

JiaoJiao Zhang

最新推荐文章于 2024-05-13 09:56:20 发布

阅读量958

点赞数 1

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/VR_dancy/article/details/126022220

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

用的库-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;
        }
      });
    }
  })
})