关于Mint UI的loadmore组件上拉为啥不加载
<template>
<div class="main">
<mt-loadmore
:top-method="loadTop"
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
ref="loadmore"
:topPullText='infor.pullTop'
:topDropText='infor.dropTop'
:topLoadingText='infor.loadingTop'
:bottomPullText='infor.pullBottom'
:bottomDropText='infor.dropBottom'
:bottomLoadingText='infor.loadingBottom'
>
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
<!-- <div slot="top" class="mint-loadmore-top">
<span v-show="topStatus === 'pull'">下拉刷新</span>
<span v-show="topStatus === 'loading'">Loading...</span>
<span v-show="topStatus === 'drop'">加载完成</span>
</div> -->
</mt-loadmore>
</div>
<!-- <div>
<input type="button" value='点击' @click='add'>
</div> -->
</template>
<script>
import { Indicator } from 'mint-ui';
// import { InfiniteScroll } from 'mint-ui';
// // Vue.use(InfiniteScroll);
// import { Toast } from 'mint-ui';
export default {
components: {
// mtLoadmore:InfiniteScroll
},
data () {
return {
msg: 'Welcome to Your Vue.js App',
list:[1,2,3,4,5,6],
allLoaded:false,
topStatus:'pull',
infor:{
pullTop:'下拉刷新',
loadingTop:'正在刷新',
dropTop:'刷新完毕',
pullDown:'上拉加载',
loadingDown:'正在加载',
dropDown:'加载完毕',
}
}
},
methods:{
add(){
Indicator.open({
text: '加载中...',
spinnerType: 'triple-bounce'
});
},
loadTop(){
this.topStatus='loading'
setTimeout(()=>{
this.topStatus='drop'
this.$refs.loadmore.onTopLoaded();
setTimeout(()=>{
this.topStatus='pull'
},500)
},2000)
},
loadBottom(){
this.list.push(1)
if(this.list.length>=15){ this.allLoaded = true;}// 若数据已全部获取完毕
this.$refs.loadmore.onTopLoaded();
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{
overflow: auto;
height: 660px
}
li{
width: 100%;
height: 80px;
background: red
}
</style>
为啥上拉不加载 搞不懂 还有如何引入到局部 我目前是引得全局组件
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论