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
< 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("")
}
})
}
},