vue2 mint-ui loadmore实现下拉刷新,上拉更多功能

mintui是饿了么团队针对vue开发的移动端组件库，方便实现移动端的一些功能,这里主要给大

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实现下拉刷新,上拉更多功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！