<template>
<div class="content">
<div class="infoTop">
<ul>
<li v-for="item in list" :key="item.id" :class="{active: active == item.id}" @click="changeActive(item.id)">{{item.name}}</li>
</ul>
</div>
<div class="infoContent" ref="infoContent">
<scroller :on-infinite="infinite" :on-refresh="refresh" ref="my_pull" :noDataText="noDataText">
<div v-for="item in 20" :key="item">
<div>
<h3>aaa</h3>
<p>aaa</p>
</div>
<div>
</div>
</div>
</scroller>
</div>
</div>
</template>
<script>
export default {
data: () => ({
list: [{
id: 0,
name: "全部"
},
{
id: 1,
name: "待审核"
},
{
id: 2,
name: "已通过"
},
{
id: 3,
name: "已驳回"
},
],
active: 0,
page: 0, // 当前页数
rows: 6, // 当期条数
isLast: false, //不是最后一页
}),
computed: {},
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: {
changeActive(id) {
this.active = id
},
// 上拉
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()
},
getServers() {
$App.showWebActivity(); //和android交互
this.$http.post(this.root + "************", {
key: this.zkey,
code: this.zcode,
pages: this.page,
rows: this.rows,
memberId: sessionStorage.getItem("memberId")
}, {
emulateJSON: true
}).then((res) => {
$App.dismissWebActivity()
if (res.body.code === 0) {
console.log(res);
if (this.page != 1) {
// 说明不是第一页,要拼接上一页的数据
this.servers = this.servers.concat(res.body.page);
} else {
// 第一页
this.servers = res.body.page
if (res.body.page.length == 0) {
// 第一页没有数据
this.noimgOk = true
this.noDataText = ""
} else {
this.noDataText = "没有更多数据"
}
}
if (res.body.page.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);
})
},
},
}
</script>
<style lang="less" scoped>
.content {
height: 100%;
.infoTop {
background: #fff;
margin-bottom: 15px;
ul {
display: flex;
li {
width: 25%;
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 2PX solid #ccc;
&.active {
border-bottom: 2PX solid red;
}
}
}
}
.infoContent {
position: relative;
width: 100%;
}
}
</style>
vue-scroller的简单使用
最新推荐文章于 2024-03-24 09:50:04 发布