## 复制代码就能用
通过$emit 触发 on监听
loadmore.vue页面
<template>
<div class="page-loadmore">
<div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeigh t + '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: .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 {
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>
mint-ui 实现下拉刷新 上拉加载 全步骤
猜你喜欢
转载自my.oschina.net/u/3690573/blog/1627437
今日推荐
周排行