在移动端mint-ui loadmore实现下拉刷新上拉显示更多

PHP中文网 • 2025年3月8日 10:33:19 • 编程技术 • 阅读 2

这次给大家带来在移动端mint-ui loadmore实现下拉刷新上拉显示更多，在移动端mint-ui loadmore实现下拉刷新上拉显示更多的注意事项有哪些，下面就是实战案例，一起来看一下。

mintui是饿了么团队针对vue开发的移动端组件库，方便实现移动端的一些功能,这里主要给大家介绍vue2 mint-ui loadmore实现下拉刷新,上拉更多功能，具体代码如下所示：

   
Pull up
  在列表底部, 按住 - 上拉 - 释放可以获取更多数据
  translate : {{ translate }}
     translateScale : {{ moveTranslate }}  
         
     {{ item }}
    
         ↓                    
         ↑                    
     
 
 .loading-background, .mint-loadmore-top span {  -webkit-transition: .2s linear;  transition: .2s linear } .mint-loadmore-top span {  display: inline-block;  vertical-align: middle } .mint-loadmore-top span.is-rotate {  -webkit-transform: rotate(180deg);  transform: rotate(180deg) } .page-loadmore .mint-spinner {  display: inline-block;  vertical-align: middle } .page-loadmore-desc {  text-align: center;  color: #666;  padding-bottom: 5px } .page-loadmore-desc:last-of-type, .page-loadmore-listitem {  border-bottom: 1px solid #eee } .page-loadmore-listitem {  height: 50px;  line-height: 50px;  text-align: center } .page-loadmore-listitem:first-child {  border-top: 1px solid #eee } .page-loadmore-wrapper {  overflow: scroll } .mint-loadmore-bottom span {  display: inline-block;  -webkit-transition: .2s linear;  transition: .2s linear;  vertical-align: middle } .mint-loadmore-bottom span.is-rotate {  -webkit-transform: rotate(180deg);  transform: rotate(180deg) } 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  {     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;  } };