Vant: （求救！！！）List组件无限刷新，看了之前相似的，还是没解决

[Frank-QI7]

我也看了之前别人提的类似的问题，可是还没有解决

      onLoad() {
        setTimeout(() => {
          if (this.search.page < this.totalPage) {
            this.search.page += 1;
            console.log("this.search.page: ",this.search.page);
            this.$http.post("/search/page",this.search).then(({data})=> {
              this.noitem = false;
              data.items.forEach(goods => {
                goods.skus = JSON.parse(goods.skus);
                goods.skus.forEach(sku => {
                  sku.price = this.formatPrice(sku.price);
                  sku.spuId = goods.id;
                  this.goodsList.push(sku);
                })
              });
            });
            // 加载状态结束
            this.loading = false;

          }else{
            this.finished = true;
          }
        }, 500);
      },

全部页面都给加载了

[sylvaner-h]

开始请求前:

this.loading = true;

[xiechao1211]

1、loading 是否有绑定v-modle
2、onLoad 是用 @事件绑定，而不是 : 属性 绑定。最好检查下这个。

[VenusPP]

类似于加载更多这类api 建议还是自己写比较好 利于以后的扩散

[Frank-QI7]

@huangysss 谢谢回复哦，请问在个地方哪加呢？

[Frank-QI7]

@xiechao1211

 <van-list
      v-model="loading"
      :finished="finished"
      :offset="offset"
      :immediate-check="immediatecheck"
      finished-text="没有更多了"
      @load="onLoad"
    >

是这样写的哦，可是就是解决不了

[Frank-QI7]

@huangysss 尝试了许多地方，还是不可以 :(

[Frank-QI7]

@VenusPP 谢谢建议

[ystarlongzi]

应该是 loading 赋值时机错误导致的

另，这里为什么要用个 setTimeout ，如果无特殊需求建议移除

onLoad() {
  setTimeout(() => {
    if (this.search.page < this.totalPage) {

      // 👇👇👇 请求前要先设置标识
      this.loading = true;

      this.search.page += 1;
      console.log("this.search.page: ",this.search.page);
      this.$http.post("/search/page",this.search).then(({data})=> {

        // 👇👇👇👇👇👇
        // 加载状态结束
        this.loading = false;
        this.noitem = false;

        data.items.forEach(goods => {
          goods.skus = JSON.parse(goods.skus);
          goods.skus.forEach(sku => {
            sku.price = this.formatPrice(sku.price);
            sku.spuId = goods.id;
            this.goodsList.push(sku);
          })
        });
      });

    }else{
      this.finished = true;
    }
  }, 500);
},

[Frank-QI7]

@ystarlongzi

      <van-list
      v-model="loading"
      :finished="finished"
      :offset="offset"
      :immediate-check="immediatecheck"
      finished-text="没有更多了"
      @load="onLoad"
    >

      onLoad() {
          if (this.search.page < this.totalPage) {
            // 👇👇👇 请求前要先设置标识
            this.loading = true;

            this.search.page += 1;
            console.log("this.search.page: ",this.search.page);
            this.$http.post("/search/page",this.search).then(({data})=> {
              this.noitem = false;
              data.items.forEach(goods => {
                goods.skus = JSON.parse(goods.skus);
                goods.skus.forEach(sku => {
                  sku.price = this.formatPrice(sku.price);
                  sku.spuId = goods.id;
                  this.goodsList.push(sku);
                })
              });
            });
            // 加载状态结束
            this.loading = false;
            this.noitem = false;

          }else{
            this.finished = true;
          }
      },

我已经改成这样了，现在出现的问题是：我只要一滑动，就会去加载新的页面，停止滑动就不会去加载新的页面，比如现在加载到第 3 页了，我再滑动，就会加载第 4 页，请问是不是 offset 的问题？

[Frank-QI7]

@ystarlongzi offset 不管设置多少都还是出现同样的问题
当刚访问页面的时候，它会去自动加第 2 页 ，:(

[ystarlongzi]

还是 this.loading = false 赋值时机错误，应该在 ajax 请求完成后赋值，仔细想想这里的逻辑

onLoad() {
  if (this.search.page < this.totalPage) {
    // 👇👇👇 请求前要先设置标识
    this.loading = true;

    this.search.page += 1;
    console.log("this.search.page: ",this.search.page);
    this.$http.post("/search/page",this.search).then(({data})=> {

      //  👉👉👉👉👉 要在请求结束后赋值为 false
      // 加载状态结束
      this.loading = false;
      this.noitem = false;

      data.items.forEach(goods => {
        goods.skus = JSON.parse(goods.skus);
        goods.skus.forEach(sku => {
          sku.price = this.formatPrice(sku.price);
          sku.spuId = goods.id;
          this.goodsList.push(sku);
        })
      });
    });
  }else{
    this.finished = true;
  }
},

[Frank-QI7]

@ystarlongzi 已经改成和你修改过后的一模一样了，还是不行 =。=

[Frank-QI7]

@ystarlongzi 是不是也是因为高度什么的原因呢？但是我给它专门套了一个 div，写了固定的 高度，还是没解决

[ystarlongzi]

在 onLoad 入口处，添加以下调试信息

onLoad {
  console.log(`loading = ${this.loading}, finished = ${this.finished}, now = ${Date.now()}`)
  // ....... 其它逻辑
}

[Frank-QI7]

@ystarlongzi

结果是这样子的

[VenusPP]

@ystarlongzi

结果是这样子的

你的offset是设置的多少，怎么设置的呢？

[ystarlongzi]

感觉应该是 isReachEdg 在某些场景下计算有点问题

@Frank-QI7 可以在 ajax 结束后，在打印下日志嘛

onLoad {
  console.log(`loading = ${this.loading}, finished = ${this.finished}, now = ${Date.now()}`)
  // ....... 其它逻辑
  this.$http.post("/search/page",this.search).then(({data})=> {
    console.log('ajax done at ', Date.now())
    // ..... 其它逻辑
  })
}

[Frank-QI7]

@VenusPP 这样设置的

[Frank-QI7]

@ystarlongzi 现在代码的逻辑是这样的，感觉是不是因为 created 里调用 loadData() 的问题呢？

日志结果：

感谢大神～～

[ystarlongzi]

@Frank-QI7 可以帮忙在加下这段日志嘛 ☕️ ☕️

// 1. 为组件添加一个 refs 属性
<vant-list
  refs="list"
/>

<script>
//  2. 👇👇👇 最顶部加下三个帮助函数
function getScrollTop(ele) {
  return 'scrollTop' in ele ? ele.scrollTop : ele.pageYOffset;
}
function getElementTop(ele) {
  return (
    (ele === window ? 0 : ele.getBoundingClientRect().top) + getScrollTop(window)
  );
}
function getVisibleHeight(ele) {
  return ele === window ? ele.innerHeight : ele.getBoundingClientRect().height;
}
// 👆👆👆

// ........ 一些代码
onLoad() {
  console.log(`loading = ${this.loading}, finished = ${this.finished}, now = ${Date.now()}`)

  // 3. 👇👇👇 再添加以下日志  
  const { $el, scroller } = this.$refs.list
  console.log('$el === scroller', $el === scroller, $el, scroller)
  console.log('scrollerHeight =', getVisibleHeight(scroller))
  console.log('scrollTop(el) =', getScrollTop($el))
  console.log('scroller.scrollHeight =', scroller.scrollHeight)
  console.log('getElementTop(el) =', getElementTop($el))
  console.log('getVisibleHeight(el) =', getVisibleHeight($el))
  console.log('getElementTop(scroller) =', getElementTop(scroller))
 // 👆👆👆

  // ....... 其它逻辑
  this.$http.post("/search/page",this.search).then(({data})=> {
    console.log('ajax done at ', Date.now())
    // ..... 其它逻辑
  })
}

</script>

[Frank-QI7]

@ystarlongzi 已经添加好：

日志信息： 出错啦，😄

[ystarlongzi]

第 3 部分的日子代码外用个 if 语句包括试下看

if (this.$refs.list) {
  // 第 3 部分的日志
  // 其实这里是想获取 `<van-list />` 实例的信息，你如果有其它办法能获取实例也可以，本地可以 debug 调试看下
  // .....
}

[Frank-QI7]

日志如下：

[Frank-QI7]

@ystarlongzi 日志在上面，谢谢大神

[ystarlongzi]

可以提供下 navigator.userAgent 嘛？

另外第 3 部分的日志输出可以加下下面的日志嘛 ☕️ ☕️

console.log('$el.getBoundingClientRect()', JSON.stringify($el.getBoundingClientRect()))

[Frank-QI7]

@ystarlongzi
navigator.userAgent = Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

日志：

剩下的都是一样的，再次感谢

[ystarlongzi]

样式里有设置 height: 0 嘛？

| |
子龙
|
|
邮箱：zhangzilong.[email protected]
|

签名由 网易邮箱大师 定制

在2019年06月04日 18:58，Frank-QI7 写道：

@ystarlongzi
navigator.userAgent = Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

日志：

剩下的都是一样的，再次感谢

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Frank-QI7]

@ystarlongzi 没有呢，我没有给它设置任何 style

[Frank-QI7]

@ystarlongzi 应该是我其他的 style 影响到了 van-list，因为我把全部css都注释掉就正常了

[Frank-QI7]

@ystarlongzi 找到原因了，就是这个 css 导致错误的：

把 float 去掉就好了

[Frank-QI7]

@ystarlongzi 感谢大神的指导～～～～

[Middletwo-Kid]

写一个可能出现这样情况的解决方案：
按照上面请求前this.loading = true ，请求后设置this.loading = false，以及在offset属性下，仍然出现多次加载的情况，看一下父级容器是否出现overflow:scroll的属性，去掉即可。