<template>
<div class="wrapper" ref="wrapper">
<div class="content" >
<div class="refresh" :class="{ativeRefresh:refresh}">刷新</div>
<div class="ct-row" v-for="(item,index) in formData.list" :key="index">
<div class="ct-row-list">{{item.id}}</div>
<div class="ct-row-list">{{item.user}}</div>
<div class="ct-row-list">{{item.des}}</div>
</div>
<div>加载</div>
</div>
</div>
</template>
<script>
import Bscroll from "better-scroll";
import axios from "axios";
import { clearTimeout, setTimeout } from ‘timers‘;
export default {
name: "wrapper",
data() {
return {
formData: {},
refresh:false
};
},
methods: {
getFormDatas() {
return axios.get("api/test/formData", { params: { id: 123456 } })
}
},
created() {
this.getFormDatas().then(res => {
console.log(res.data);
this.formData = res.data;
this.formData.list.length=10;
});
},
mounted() {
let count=1;
this.scroll = new Bscroll(this.$refs.wrapper, {
mouseWheel: true,
click: true,
tap: true,
pullDownRefresh: {
threshold: 60,//下拉60px刷新
stop: 20//上弹到20px处，等待刷新完成
},
pullUpLoad:{
threshold: -20 //往下拉20px处时重新加载
}
});
//下拉刷新
this.scroll.on("pullingDown", () => {
this.refresh=true;
this.getFormDatas().then(res => {
const _this=this;
// const timer=clearTimeout()
setTimeout(()=>{
_this.refresh=false;
_this.formData = res.data;
_this.scroll.finishPullDown()
},500)
});
});
//上拉加载
this.scroll.on(‘pullingUp‘, () => {
const _this=this;
this.getFormDatas().then(res => {
// const timer=clearTimeout()
setTimeout(()=>{
_this.formData = res.data;
_this.formData.length=20;
_this.scroll.finishPullDown()
},500)
});
})
},
destroyed(){
this.scroll=null;
}
};
</script>
<style scoped>
/* wrapper要设置绝对定位 */
.wrapper {
overflow: hidden;
position: absolute;
top: 0.9rem;
left: 0;
right: 0;
bottom: 0;
}
.content {
padding: 0 0.2rem 0 0.2rem;
}
.ct-row::after{
content: "";
height: 2px;
width: 100%;
background: #eee;
display: block;
}
.ct-row-list{
height: .4rem;
line-height: .4rem;
}
.refresh{
display: none;
}
.ativeRefresh{
display: block;
}
</style>
原文地址：https://www.cnblogs.com/wly-laowang/p/11184937.html