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(新數據)