List 列表
没啥好说的,只是用van-list包裹需要刷新的div,设置好动态pageSize,
记得在onload事件加上异步,否则 ,瞬间给你刷新到了9999999
<template>
<div class="top">
<div v-if="!openData.length">暂无开门记录~</div>
<div v-else>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div v-for="item in openData" :key="item.RE_ID">
<div class="container">
<div v-if="item.PHOTO === undefined"><img src='../../../assets/images/noPhoto.jpg' /></div>
<div v-else><img :src=item.PHOTO /></div>
<div>设备:{{item.DEV_NAME}}</div>
<div>类型:{{item.TYPE}}</div>
<div>开门人:{{item.REAL_NAME}}</div>
<div>开门时间:{{item.ACCESS_TIME}}</div>
</div>
</div>
</van-list>
</div>
</div>
</template>
<script>
import {getAjax} from '../../../assets/common/REQUEST'
export default {
name: 'Visiting',
data () {
return {
openData: [],
pageSize: 15,
loading: false,
finished: false
}
},
created () {
this.getData()
},
methods: {
getData () {
getAjax('/api/door/accessList?pageSize=' + this.pageSize).then(res => {
this.openData = res.data.list
})
},
onLoad () {
setTimeout(() => {
this.loading = false
this.pageSize += 15
this.getData()
}, 100)
}
}
}
</script>
<style scoped>
.container{
background: white;
margin-top: 10px;
overflow:hidden;
}
.container img{
float: left;
width: 30%;
/*max-width: 123px;*/
padding: 8px;
margin-left: 12px;
}
.container div{
margin-top: 4px;
font-size: 12px;
}
</style>