< template >

<div class="home-container container no-header">
    <headers></headers>
        <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>
                     <spinner class="spinner" v-if="spinnerShow"></spinner>
                     <div class="tip" v-show="tip">...</div>
             </div>
             
        </div>
    <bottom-tab></bottom-tab>
</div>

< / template >
< script >

import { Spinner } from 'vux'
import headers from '@/components/header'
import bottomTab from '@/components/bottomBar.vue'

import BScroll from 'better-scroll'
export default {

  
  data (){
      return {
           pageNum: 1,
       pageSize: 6,
       data:[],
       spinnerShow:false,
       tip:false,
      }
  },
  components: {
  headers,
  bottomTab,
  Spinner

},
mounted () {

   this.$nextTick(() => {
     this.scroll = new BScroll(this.$refs.wrapper, {
          pullUpLoad: {
            threshold: -5,
          },
          resizePolling:60
        })
           this.load()    //
    }) 

},
created () {

     this.LoadMore()   //

},
methods: {

       load(){   //    
                this.scroll.on('pullingUp', () => {   
                        this.spinnerShow = true
                        this.tip = false;
                        setTimeout((res)=>{
                             this.spinnerShow = false;
                             
                             this.LoadMore()    //
                        },1000)
                     
                
                 })
    },
    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.finishPullUp()
                              this.scroll.refresh()
                            if (res.data.pageInfo.hasNextPage == false) { //
                                 this.spinnerShow = false;
                                 
                                
                                     
                                
                                 
                               this.scroll.finishPullUp() 
                                this.tip = true;
                         this.scroll.refresh()
                         
                                console.log("")
                    }    
                   })
         }

},
watch: {

       data(val){
           this.$nextTick(() => {
                   this.scroll.refresh()
                   this.scroll.finishPullUp()
           })
       }

}
}
< / script >
< style scoped >

.main{
    width: 100%;
    position: absolute;
    top:47px;
    bottom:53px;
    overflow: hidden;
}
.main-box{
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
}
.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;
}
.spinner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    
}
.tip{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color:-sharp999999;
    height: 20px;
}

< / style >

this is the pull-up loaded demo I just wrote today