<template>
<div class="content">
<div class="infoContent" ref="infoContent">
<scroller :on-infinite="infinite" :on-refresh="refresh" ref="my_pull" :noDataText="noDataText">
<div>
<div v-for="item in servers" :key="item.id" class="infoBody">
</div>
</div>
</scroller>
</div>
</div>
</template>
<script>
export default {
data: () => ({
servers: {},
active: '',
page: 0, // 当前页数
rows: 6, // 当期条数
isLast: false, //不是最后一页
}),
created() {
this.$store.dispatch("newTitle", "留言板")
},
mounted() {
this.$nextTick(() => {
let a = document.documentElement.clientHeight;
let b = this.$refs.infoContent.getBoundingClientRect().top
this.$refs.infoContent.style.height = a - b + "px"
})
},
methods: {
getServers() {
// $App.showWebActivity(); //和android交互
this.$http.post(this.root + "thFarm/queryMessageList", {
key: this.zkey,
code: this.zcode,
memberId: sessionStorage.getItem('memberFarmId'),
mFramId: sessionStorage.getItem('mFramId'),
page: this.page,
rows: 5
}, {
emulateJSON: true
}).then((res) => {
// $App.dismissWebActivity()
if (res.body.code === 100) {
this.isOpt = res.body.list.isOpt;
console.log(res);
// 1. 判断是否是第一页
if (this.page != 1) {
// 说明不是第一页,要拼接上一页的数据
this.servers = this.servers.concat(res.body.list.rows);
} else {
// 第一页
this.servers = res.body.list.rows;
console.log(this.servers);
if (res.body.list.rows.length == 0) {
// 第一页没有数据
this.noimgOk = true
this.noDataText = "没有更多数据"
} else {
this.noDataText = "没有更多数据"
}
}
// 1. 判断下一页是否还有数据
if (res.body.list.rows.length >= this.rows) {
// 说明可能还有数据
this.$refs.my_pull.finishInfinite(false);
this.isLast = false
} else {
// 说明没有更多数据了
this.$refs.my_pull.finishInfinite(true);
this.isLast = true
}
} else {
console.log(res);
}
}, (err) => {
// $App.dismissWebActivity()
console.log(err);
})
},
// 上拉
infinite: function() {
console.log('infinite')
if (!this.isLast) {
this.page++
console.log("this.page " + this.page);
this.getServers()
} else {
this.$refs.my_pull.finishInfinite(true);
}
},
// 下拉
refresh: function() {
console.log('refresh')
this.$refs.my_pull.finishPullToRefresh()
this.page = 1
console.log("this.page " + this.page);
this.getServers()
},
},
}
</script>
<style lang="less" scoped>
.content {
.infoContent {
position: relative;
.infoBody {
height: 300px;
}
}
}
</style>
懒人上拉下拉
猜你喜欢
转载自blog.csdn.net/qq719756146/article/details/86574157
今日推荐
周排行