mint ui 中 使用loadmore加载更多组件 autoFill 撑满容器的属性没有用?
代码:
<div class="container"
:style="{
'-webkit-overflow-scrolling': scrollMode,
'height': containerHeight,
'overflow': 'scroll'
}"
>
<mt-loadmore
:top-method="loadTop"
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
:autoFill = "true"
ref="loadmore">
<ul>
<li v-for="item in result_data" @click="toDetail(item)">
<div class="cc">
<img :src="item.routeThumb" alt="">
<div class="content">
<h1>{{item.routeName}}</h1>
<star-groups
:star_data="item.star"
></star-groups>
<label for="">{{item.typeName}}</label>
<div class="price">
<span>¥</span>{{item.routePrice}}起
</div>
</div>
</div>
</li>
</ul>
</mt-loadmore>
</div>
js代码
export default {
data() {
return {
tabData: [
{
label: '推荐顺序',
value: 1
},
{
label: '全部类型',
value: 2,
},
{
label: '区域筛选',
value: 3,
}
],
result_data: [],
search_data: {
//navId:6,
start: 0,
limit: 5,
cityId: 179
},
query_data: {},//筛选条件
types: [], //类别
regions: [], //区域
allLoaded: false, //是否可以上拉属性,false可以上拉,true为禁止上拉,就是不让往上划加载数据了
scrollMode:"auto", //移动端弹性滚动效果,touch为弹性滚动,auto是非弹性滚动
containerHeight: '600px',
};
},
methods: {
getData() {
this.$$api_order_routeList({
data: {
...this.search_data,
...this.query_data
},
fn: res => {
this.result_data = res.routes;
this.types = res.types;
this.regions = res.regions;
}
})
},
loadTop() {
//...// 加载更多数据
this.$refs.loadmore.onTopLoaded();
},
loadBottom() {
//...// 加载更多数据
this.allLoaded = true;// 若数据已全部获取完毕
this.$refs.loadmore.onBottomLoaded();
},
loadPageList (){
// 查询数据
this.api.PageList(this.searchCondition).then(data =>{
// 是否还有下一页,加个方法判断,没有下一页要禁止上拉
this.isHaveMore(data.result.haveMore);
this.pageList = data.result.pageList;
this.$nextTick(function () {
this.scrollMode = "touch";
});
});
},
more(){
},
isHaveMore(isHaveMore){
// 是否还有下一页,如果没有就禁止上拉刷新
this.allLoaded = true; //true是禁止上拉加载
if(isHaveMore){
this.allLoaded = false;
}
},
changeQuery(obj) {
this.query_data = obj;
this.getData()
},
toDetail(item) {
this.$router.push('/order/routeDetail/' + item.routeId + '/' + 1);
},
getBoxHeight(){
let win_height = window.screen.height;
let header_height = document.querySelector('.header').offsetHeight;
let menu_height = document.querySelector('.Tab').offsetHeight;
this.containerHeight = win_height - header_height - menu_height + 2 + 'px';
},
},
mounted() {
this.getBoxHeight();
//this.search_data.navId = this.$route.params.id;
this.getData()
}
}