better-scroll相关问题（自动触发怎么用）

Question

better-scroll最新版本的openPullUp，closePullUp是怎么用的，有没有人能给个例子？
还有怎么自动触发better-scroll的下拉刷新（用pullingDown监听的）？

Answer 1

<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, //请求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.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:#999999;
    height: 20px;
}

</style>

这是我今天刚写的上拉加载的demo