Vue uses better-scroll pull-up to load the bounce problem. Only after the pull-up bounce twice can you see the data from the pull-up load.

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 ()

after the changes.

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.

Jan.25,2022

I don't know if this video will help you: https://v.youku.com/v_show/id.
video is not better-scroll, but sliding plug-ins are basically the same principle.
your problem may be the reason for the picture. You have to wait until the picture is loaded before you refresh

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2bfa1-2bad1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2bfa1-2bad1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?