vue2 mint-ui loadmore實現下拉重新整理,上拉更多功能，vue2loadmore

vue2 mint-ui loadmore實現下拉重新整理,上拉更多功能，vue2loadmore

mintui是餓了麼團隊針對vue開發的移動端組件庫，方便實現移動端的一些功能,這裡主要給大家介紹vue2 mint-ui loadmore實現下拉重新整理,上拉更多功能，具體代碼如下所示：

<template> <div class="page-loadmore">  <h1 class="page-title">Pull up</h1>  <p class="page-loadmore-desc">在列表底部, 按住 - 上拉 - 釋放可以擷取更多資料</p>  <p class="page-loadmore-desc">translate : {{ translate }}</p>  <div class="loading-background" :style="{ transform: 'scale3d(' + moveTranslate + ',' + moveTranslate + ',1)' }">   translateScale : {{ moveTranslate }}  </div>  <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">   <mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange"    :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore">    <ul class="page-loadmore-list">     <li v-for="item in list" class="page-loadmore-listitem">{{ item }}</li>    </ul>    <div slot="top" class="mint-loadmore-top">     <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>     <span v-show="topStatus === 'loading'">      <mt-spinner type="snake"></mt-spinner>     </span>    </div>    <div slot="bottom" class="mint-loadmore-bottom">     <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>     <span v-show="bottomStatus === 'loading'">      <mt-spinner type="snake"></mt-spinner>     </span>    </div>   </mt-loadmore>  </div> </div></template><style> .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) }</style><script 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;  } };</script>

總結

以上所述是小編給大家介紹的vue2 mint-ui loadmore實現下拉重新整理,上拉更多功能，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！