选用mint-ui的原因:有上拉/下拉加载的组件
<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" @bottom-status-change="handleBottomChange" ref="loadmore">
</mt-loadmore>
mounted() {
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
},
methods:{
handleBottomChange(status) {
console.log('handleBottomChange ', status);
this.bottomStatus = status;
},
}
loadBottom() {
//添加刷新列表的方法
this.allLoaded = true;// 若数据已全部获取完毕
this.$refs.loadmore.onBottomLoaded();// 固定方法,查询完要调用一次,用于重新定位
}
问题:
1、pull-up事件loadBottom无法触发,pull-down事件loadTop却正常,原因没有限制<mt-loadmore>的父组件高度,同时也需要给父容器添overflow:scroll属性
2、在手机上测试发现wrapper容器在滑动时有些慢、卡顿的现象,添加css属性-webkit-overflow-scrolling : touch;可解,原因是启用了硬件加速
3、wrapperHeight高度一定要小于列表的高度才可以pull up