html 结构如下
<div id="wrap" class="wrapper" ref='wrapper'>
<div class="content">
<div class="loading-wrapper topline"><span>{{toptishi}}</span>
</div>
<ul v-for="item in giftlist">
<li>
<div class="icon">
<img v-bind:src="item.ioc">
</div>
<div class="game_title">
<div><p>{{item.gameName}}</p><p>{{item.descriptor}}</p></div>
<div>
<span class="playnow" onclick="newPay()">
<img src="">
</span>
</div>
</div>
<div class="clearfix"></div>
</li>
<template v-if="item.giftList.length > 0">
<li v-for="giftitem in item.giftList" class="gift_list">
<div class="game_describle">
<p>{{giftitem.giftTitle}}</p>
</div>
</li>
</template>
</ul>
<div class="loading-wrapper botline">
<span>{{bottishi}}</span>
</div>
</div>
</div>
其中 content 区域内为滚动区域，（是wrapper下的第一个div）
js如下
import better-scroll；
后台交互：loadData（）；
methods：{
await this.$axios({
method: "post",
url: "",
}).then((res)=>{
this.data = res.data.concat(this.data);
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, {});
console.log(this.scroll);
this.scroll.on('touchEnd', (pos) => {
console.log(pos);
if (pos.y > 50) {
this.page=parseInt(this.page)+parseInt("1");
if(this.page>this.totalPage){
this.toptishi = "已经加载全部"
}else{
this.getDate()
}
}
if(this.scroll.y <= (this.scroll.maxScrollY + 50)) {
this.bottishi = "刷新成功"
}else{
}
})
} else {
this.scroll.refresh()
}
})
})
}
此处为下拉加载，上拉刷新；
两处知识点：concat 方法 上拉触发应该是touchEnd（大写）
若上拉加载 下拉刷新时 原有数据上.concat(新数据)