这次给大家带来mint-ui在手机端做出下拉刷新与上拉加载，mint-ui在手机端做出下拉刷新与上拉加载的注意事项有哪些，下面就是实战案例，一起来看一下。

emplate> 
 
Pull up
 
在列表底部, 按住 - 上拉 - 释放可以获取更多数据
 
translate : {{ translate }}
 
 translateScale : {{ moveTranslate }} 
 
  
 
{{ item }}
 
 
 ↓    
 
 ↑    
  
 
<ｓｃｒｉｐｔ type="text/babel"> export default { data() { return { list: [], allLoaded: false, bottomStatus: '', wrapperHeight: 0, topStatus: '', //wrapperHeight: 0, translate: 0, moveTranslate: 0 }; }, methods: { handleBottomChange(status) { this.bottomStatus = status; }, loadBottom() { setTimeout(() => { let lastvalue = this.list[this.list.length - 1]; if (lastValue < 40) { for (let i = 1; i <= 10; i++) {       this.list.push(lastValue + i);      }     } else {      this.allLoaded = true;     }     this.$refs.loadmore.onBottomLoaded();    }, 1500);   },   handleTopChange(status) {    this.moveTranslate = 1;    this.topStatus = status;   },   translateChange(translate) {    const translateNum = +translate;    this.translate = translateNum.toFixed(2);    this.moveTranslate = (1 + translateNum / 70).toFixed(2);   },   loadTop() {    setTimeout(() => { let firstValue = this.list[0]; for (let i = 1; i <= 10; i++) { this.list.unshift(firstValue - i); } this.$refs.loadmore.onTopLoaded(); }, 1500); }, }, created() { for (let i = 1; i <= 20; i++) { this.list.push(i); } }, mounted() { this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top; } };

相信看了本文案例你已经掌握了方法，更多精彩请关注本站其它相关文章！

推荐阅读：

使用iview的ui框架自定义播放器

如何操作JS遍历多维数组