会出现图片已经加载完毕,但是加载动画没有消失,当图片较少不能充满一页时,无法显示"已到最后信息"

[fg607]

有时会出现图片已经加载完毕,但是加载动画没有消失,当图片较少不能充满一页时,无法显示"已到最后信息"

貌似在触发finished事件时,可以通过this.$refs.waterfall.isFinished = true,解决

[daizch]

感谢反馈，想确认下，当你加载完毕后，是否有主动调用 this.$refs.waterfall.end()？因为我这边测试当图片较少不满一页，也是可以显示出来已到最后信息。

[fg607]

@daizch

    loadData () {
      if (this.canLoad && !this.loading) {
        this.loading = true
        var id = this.$route.params.id
        this.$axios.get('https://xxxxxxxxx/member/' + id + '?page=' + this.page)
          .then(res => {
            if (res.data.length > 0) {
              this.imgsArr = this.imgsArr.concat(res.data)
              this.page++
            } else {
              this.$refs.waterfall.end()
              this.canLoad = false
            }
            this.loading = false
          })
      }
    },

[fg607]

@daizch 有调用,但是必须是滚动条到底底部处罚的loadData方法,如果滚动条不出现的情况下,是不是就不能触发loadData方法,导致无法调用this.$refs.waterfall.end()?

[fg607]

我使用下面这种方法就解决了这个问题

   <vueLazyWaterfall
        :items="imgsArr"
        ref="waterfall"
        :colNum="2"
        :diff = "{bottom: 800}"
        @load="loadData"
        class="waterfall"
        @finished="loaded"
      >

 loaded () {
      this.$refs.waterfall.isFinished = true
    },