【记录问题】移动端vue.js+mint-ui实现上拉/下拉加载的问题

291 阅读1分钟

选用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

参考: fy98.com/2018/06/15/…