vant list freshheight, pull +list, vant刷新加载,下拉加载更多
<div v-if="commentList.length" :style="{height: freshHeight + 'px'}" class="comments_content_wrap commentList__group list-content" ref="listRef">
<van-pull-refresh
v-model="refreshing"
@refresh="onRefresh"
>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
:immediate-check="false"
:offset="1"
@load="onLoad"
>
<div class="comment_item" v-for="(item, index) in commentList" :key="index" style="marginBottom: 12px">
<div class="comment" >
</div>
</div>
</van-list>
</van-pull-refresh>
</div>
js部分:
onRefresh () {
// 清空列表数据
this.finished = true
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
this.loading = true
this.refreshing = true
this.listQuery = {
current: 1,
size: 10
}
this.onLoad()
},
onLoad () {
const timer = setTimeout(() => {
this.getComments()
clearTimeout(timer)
}, 500)
},
async getComments () {
const params = {
params: {
}
}
let res = await this.axios.get(url, params)
if (res.data.code === 0) {
if (this.refreshing) {
this.setListData([])
this.refreshing = false
}
this.loading = false
const { total, records } = res.data.data
this.total = total
this.listQuery.current++
this.finished = records.length < this.listQuery.size
this.setListData(records, true)
} else {
this.setListData([])
this.refreshing = false
this.$toast(res.data.msg)
}
setTimeout(() => {
if (this.$refs.listRef && this.commentList.length) {
let height = 15
if (!this.isSelfFlag) {
height = 90
}
this.freshHeight = document.documentElement.clientHeight - this.$refs.listRef.getBoundingClientRect().top - height
}
}, 100)
},
setListData (data, isMore) {
if (isMore) {
this.commentList= this.$lodash.concat(this.commentList, data)
} else {
this.commentList = data
}
},
例2:
<div class="middle_content_wrap" ref="listRef" v-if="this.currentMonthList.length !== 0" :style="{ height: freshHeight + 'px' }">
<div
class="list__group list-content"
>
<van-pull-refresh
v-model="refreshing"
@refresh="onRefresh"
>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
:immediate-check="false"
:offset="1"
@load="onLoad"
>
<div class="list" >
<div class="row_content" v-for="(item, index) in currentMonthList" :key="index">
item
</div>
</div>
</van-list>
</van-pull-refresh>
</div>
</div>
例2js部分:
onRefresh () {
// 清空列表数据
this.finished = true
// 隐藏文本
this.finishedTextShow = false
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
this.loading = true
// 将 refreshing 设置为 true,表示处于加载状态
this.refreshing = true
this.listQuery = {
current: 1,
size: 9
}
this.onLoad()
},
// 下拉刷新,上拉加载
onLoad () {
const timer = setTimeout(() => {
this.getList()
clearTimeout(timer)
}, 500)
},
async getList () { // 当月按天周年人员信息分页查询
const params = {
params: {
}
}
let res = await this.axios.get(url, params)
// this.currentMonthList = data.records
if (res.data.code === 0) {
if (this.refreshing) {
this.setListData([])
this.refreshing = false
}
this.loading = false
const { total, records } = res.data.data
this.total = total
this.listQuery.current++
this.finished = records.length < this.listQuery.size
this.setListData(records, true)
} else {
this.setListData([])
this.refreshing = false
this.$toast(res.data.msg)
}
},
setListData (data, isMore) {
if (isMore) {
this.currentMonthList= this.$lodash.concat(this.currentMonthList, data)
} else {
this.currentMonthList = data
}
},
watch: {
currentMonthList: {
handler(val) {
if (val && val.length) {
this.showPage = true
setTimeout(() => {
if (this.$refs.listRef && this.currentMonthList.length) {
let height = 75
this.freshHeight = document.documentElement.clientHeight - this.$refs.listRef.getBoundingClientRect().top - height
}
}, 100)
}
}
}
},

浙公网安备 33010602011771号