vue 中使用 better-scroll 上拉加载反弹问题，上拉反弹两次之后，才能看见上拉加载出来的数据

Question

问题描述

vue 中使用 better-scroll 上拉加载反弹问题，上拉反弹两次之后，才能看见上拉加载出来的数据,
不能即使刷新页面高度

问题出现的环境背景及自己尝试过哪些方法

watch:{

       data(val){
           console.log("变化了")
           this.scroll.refresh()
       }

}

监听数据的变化，变化之后调用this.scroll.refresh()

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

        <div class="main" ref="wrapper">
             <div class="main-box" >
                     <div class="box" v-for="item in data">
                             <img src="../../../static/img/banner.png" alt="" />
                             <img src="../../../static/img/banner.png" alt="" />
                     </div>
             </div>
        </div>

        .main{
            border: 1px solid red;
            width: 100%;
            position: absolute;
            top:46px;
            bottom:53px;
            overflow: hidden;
        }
        .main-box{
            display: flex;
            flex-direction: column;
        }
        .box{
            display: flex;
            justify-content: space-between;
            padding-bottom: 5px;
            
        }
        .box >img:nth-child(1){
                width: 49%;
                height: 100px;
        }
        .box >img:nth-child(2){
                width: 49%;
                height: 100px;
        }
        
        mounted(){
               this.$nextTick(() => {
                 this.scroll = new BScroll(this.$refs.wrapper, {
                      pullUpLoad: {
                        threshold: -53,
                      },
                      resizePolling:60
                    })
                       this.load()    //绑定上拉
                }) 
        },
        
       created(){
             this.LoadMore()   //加载数据
       },
    
         methods:{
               load(){   //这一部分不是加载数据，是初始化这个上拉    
                this.scroll.on('pullingUp', () => {   
                      this.LoadMore()    //上拉的时候调用
                 })
            },
    
    
            LoadMore(){
                 this.axios({
                        url:"/wxapi-web/diaryInfo/getDiaryInfoByCategoryId",
                        method:"get",
                        params:{
                              categoryID: -1, //请求tab的id
                              pageNum: this.pageNum, //页数
                              pageSize: this.pageSize,
                        }
                      }).then(res=>{
                          
                                this.data = [...this.data,...res.data.pageInfo.list]
                                this.pageNum++
                                console.log(this.data)
                                this.scroll.refresh()
                              this.scroll.finishPullUp()
                             
                            if (!res.data.pageInfo.hasNextPage) { //判断有没有下一页
                              this.scroll.finishPullUp()
                               console.log("加载完了")
                    }    
                   })
              }
    
           },
        

你期待的结果是什么？实际看到的错误信息又是什么？

那位大佬帮忙解决一下，感激不尽，

Answer 1

不知道这个视频对你有没有帮助：https://v.youku.com/v_show/id...
视频虽然不是better-scroll的，但是滑动插件基本上都是这么个原理
你的问题可能是图片的原因，要等图片加载完成才能refresh