mint-ui 下拉刷新 上拉加载

## 复制代码就能用

通过$emit 触发 on监听

loadmore.vue页面

< template>

< div class= "page-loadmore">

< 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"

:autoFill=" false" ref= "loadmore">

< slot></ slot>

< div slot= "top" class= "mint-loadmore-top">

< span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</ span>

< span v-show="topStatus === 'loading'">

< span v-show="topStatus === 'drop'">释放更新</ span>

< 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 scoped>

.loading-background, .mint-loadmore-top span {

-webkit-transition: .2 s linear;

transition: .2 s linear

}

.mint-loadmore-top span {

display: inline-block;

vertical-align: middle

}

.mint-loadmore-top span .is-rotate {

-webkit-transform: rotate( 180 deg);

transform: rotate( 180 deg)

}

.page-loadmore .mint-spinner {

display: inline-block;

vertical-align: middle

}

.page-loadmore-desc {

text-align: center;

color: #666;

padding-bottom: 5 px

}

.page-loadmore-desc:last-of-type,

.page-loadmore-listitem {

border-bottom: 1 px solid #eee

}

.page-loadmore-listitem {

height: 50 px;

line-height: 50 px;

text-align: center

}

.page-loadmore-listitem:first-child {

border-top: 1 px solid #eee

}

.page-loadmore-wrapper {

overflow: scroll

}

.mint-loadmore-bottom span {

display: inline-block;

-webkit-transition: .2 s linear;

transition: .2 s linear;

vertical-align: middle

}

.mint-loadmore-bottom span .is-rotate {

-webkit-transform: rotate( 180 deg);

transform: rotate( 180 deg)

}

</ style>

< script type= "text/babel">

export default {

name: "c_loadMore",

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);

this. $emit( "loadBottom");

},

handleTopChange( status) {

this.moveTranslate = 1;

this.topStatus = status;

},

onTopLoaded() {

this.$refs.loadmore. onTopLoaded();

},

onBottomLoaded() {

this.$refs.loadmore. onBottomLoaded();

},

setAllLoaded( val){

this.allLoaded = val;

},

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);

this. $emit( "loadTop");

},

},

created() {

// for (let i = 1; i <= 20; i++) {

// this.list.push(i);

// }

},

mounted() {

this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper. getBoundingClientRect().top;

}

};

</ script>

## 需要引入页面

< template>

< div>

< Cloadmore @loadBottom="loadBottom" @loadTop="loadTop" ref= "listTopic">

<!-- 放入要加载的数据 -->

< Cloadmore>

</ div>

</ template>

< script>

import Cloadmore from 'loadmore.vue'

export default {

data () {

return {

loader: false

}

},

created(){

### 建议把网络请求进行封装 本人在做项目是发现loadbottom进入页面就会加载

不知是本人样式原因还是怎么 首页数据加载时中是页面卷去一点 。

最后 请求数据成功后设置scrollTop解决

this.$refs.listTopic. onBottomLoaded();

setTimeout( function () {

document. querySelector( '.page-loadmore-wrapper').scrollTop = 0;

}, 0)

},

methods: {

loadBottom() {

let self = this;

if( ! this.loader){

return;

};

setTimeout(() => {

// 发送请求加载数据 数据请求成功设置为loader为 true

self.$refs.listTopic. onBottomLoaded();

}, 2000);

},

loadTop() {

let self = this;

setTimeout(() => {

// 发送请求加载数据 数据请求成功设置为loader为 true

self.$refs.listTopic. onTopLoaded();

}, 1500);

},

},

components: {

Cloadmore // 引入的组建

}

}

</ script>