直接上代码:
<div class="profly-layout">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh" loosing-text="释放刷新" pulling-text="下拉刷新" success-text="刷新成功">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多啦"
offset="58"
:immediate-check="false"
@load="onLoad">
<div class="item" v-for="(item, index) in list" :key="index">
<p>{{ index+1 }}</p>
<p>{{ item.addtime }}</p>
<p>{{ item.id }}</p>
</div>
</van-list>
</van-pull-refresh>
</div>
js:
<script>
import { List, PullRefresh } from 'vant';
export default {
data() {
return{
list: [],
loading: false, //上拉加载
finished: false, //上拉加载完毕
refreshing: false, //下拉刷新
pageno: 1,
pagesize:10, //分页条数
}
},
components:{
[List.name]: List,
[PullRefresh.name]:PullRefresh,
},
created () {
},
mounted(){
this.getData()
},
methods:{
onRefresh() { //下拉刷新
this.getData()
},
onLoad() { //上拉加载下一页
let data = {
sort:"addtime desc",
pageno: this.pageno,
pagesize: this.pagesize
}
this.$axios.post("/syJdc/service/findRecord", data).then( res => {
let datas = res.data.queryResult
this.list = this.list.concat(datas)
if (this.list.length < res.data.rowCount) {
this.pageno++
this.loading = false
}else{
this.finished = true
this.loading = true
}
})
},
async getData() {
let data = {
sort:"addtime desc",
pageno: this.pageno,
pagesize: this.pagesize
}
this.$axios.post("/syJdc/service/findRecord", data).then( res => {
this.list = res.data.queryResult ; //res.data.queryResult是列表集合
// rowCount 是后台返回的列表总条数
if(res.data.rowCount === this.list.length){
this.finished = true;
}else {
this.finished = false;
}
this.pageno++;
this.refreshing = false;
this.loading = false;
})
}
}
}
</script>
css:
.profly-layout {
.item {
width: 100%;
border: 1px solid blue;
margin-bottom: 20px;
text-align: center;
line-height: 26px;
box-sizing: border-box;
}
}
效果:
总结:在写样式的时候一定要注意留心观察请求,本人遇到过某些样式会导致页面疯狂请求数据,具体原因不详