problem description

use better-scroll pull-up to load the bounce problem in vue. Only after the pull-up bounce twice can you see the data loaded by pull-up.
cannot refresh the page height

the environmental background of the problems and what methods you have tried

watch: {

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

}

listen for changes in data, and call this.scroll.refresh ()

related codes

/ / Please paste the code text below (do not replace the code with pictures)

        <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, //tabid
                              pageNum: this.pageNum, //
                              pageSize: this.pageSize,
                        }
                      }).then(res=>{
                          
                                this.data = [...this.data,...res.data.pageInfo.list]
                                this.pageNumPP
                                console.log(this.data)
                                this.scroll.refresh()
                              this.scroll.finishPullUp()
                             
                            if (!res.data.pageInfo.hasNextPage) { //
                              this.scroll.finishPullUp()
                               console.log("")
                    }    
                   })
              }
    
           },
        

what result do you expect? What is the error message actually seen?

the boss helped solve it. Thank you very much.