原因见地址:https://blog.csdn.net/woyidingshijingcheng/article/details/79899823
解决方法:获取手机屏幕高度,设置高度为100%的大小。
<template>
<div id='carList' style="overflow-y: scroll;">
<!--:top-method="loadTop"-->
<mt-loadmore v-if="total>0" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false">
<div v-for="(item, index) in list" class="block" @click="goCarDetail(index)">
<div class="inline-b" style="width:35%;">
<img :src="item.picRemotePath + '/' + item.picName1" class="pic">
</div>
<div class="inline-b" style="width:63%;line-height: 25px;">
<div>车牌号码:<span class="value-size">{{item.plateNum}}</span></div>
<div>车牌类型:<span class="value-size">{{item.vehicleTypeCV}}</span></div>
<div>拍摄时间:<span class="value-size">{{item.captureTime }}</span></div>
</div>
</div>
</mt-loadmore>
<div v-else-if="!isLoading" style="margin-left: 42%;">
暂无记录
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {carList} from '@/api/car'
import { Toast } from 'mint-ui'
export default {
name: 'carList_index',
data: function () {
return {
isLoading: false,
prefixPath: '',
path: '',
list: [{
carNo: '',
picPath: '',
watchTime: '',
driveway: ''
}],
allLoaded: false,
pageSize: 7,
currentPage: 1,
total: 0,
mobileHeight: ''
}
},
methods: {
loadTop() {
this.getCarList()
this.$refs.loadmore.onTopLoaded();
},
loadBottom() {
// debugger
if (this.pageSize*this.currentPage < this.total) {
this.currentPage ++
this.loadMoreList()
this.$refs.loadmore.onBottomLoaded();
} else {
Toast({
message: '沒有更多数据了',
position: 'middle'
});
this.$refs.loadmore.onBottomLoaded();
// this.allLoaded = true;// 若数据已全部获取完毕
}
},
goCarDetail(index) {
// sessionStorage.setItem("id", this.list[index].id);
let carDetail = JSON.stringify(this.list[index])
sessionStorage.setItem('carDetail',carDetail)
this.$router.push({ name: '车辆详情' })
},
loadMoreList() {
let self = this
let params = {}
params = JSON.parse(sessionStorage.getItem("param"))
params.currentPage = this.currentPage
params.pageSize = this.pageSize
params.needPage = true
this.isLoading = true
return new Promise((resolve, reject) => {
carList(params).then(response => {
if (response.data && response.code === 200) {
if (response.data.list.length > 0) {
self.list = this.list.concat(response.data.list)
self.total = response.data.total
// let carlist = JSON.stringify(this.list)
// sessionStorage.setItem("carlist", carlist);
this.$refs.loadmore.onBottomLoaded();
}
}
this.isLoading = false
// resolve()
}).catch(error => {
// reject(error)
})
})
},
getCarList() {
let params = {}
params = JSON.parse(sessionStorage.getItem("param"))
this.currentPage = 1
params.currentPage = this.currentPage
params.pageSize = this.pageSize
params.needPage = true
this.isLoading = true
return new Promise((resolve, reject) => {
carList(params).then(response => {
if (response.data && response.code === 200) {
if (response.data.list.length > 0) {
this.list = response.data.list
this.total = response.data.total
// let carlist = JSON.stringify(this.list)
// sessionStorage.setItem("carlist", carlist);
this.$refs.loadmore.onTopLoaded();
}
}
this.isLoading = false
// resolve()
}).catch(error => {
// reject(error)
})
})
}
},
created() {
this.getCarList()
},
mounted() {
this.mobileHeight = window.innerHeight + "px"
console.log(this.mobileHeight)
let item = document.getElementById('carList')
item.style.height = this.mobileHeight
},
computed: {
...mapState({
//获取vuex中的feedbackData
token: state => state.user.token
})
}
}
</script>