上拉加载 以及 下拉刷新 是内容通过手指移动 而触发事件
在mintUi组件中使用Loadmore方法及其简单 方法如下
<body>
<div id="app">
<div class="">
<div class="test">
//这里放组件
<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"
ref="loadmore">
//这里是放的内容
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</mt-loadmore>
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'"
:class="{ 'rotate': topStatus === 'drop' }">更新中.....</span>
<span v-show="topStatus === 'loading'">Loading...</span>
</div>//用插槽来显示下拉刷新的文字 跟等待响应式的文字 可以通过 类名来修改样式
<div slot="bottom" class="mint-loadmore-bottom">
<span v-show="bottomStatus !== 'loading'"
:class="{ 'rotate': bottomStatus === 'drop' }">加载更多数据</span>
<span v-show="bottomStatus === 'loading'">Loading...</span>
</div>//这是上拉加载插槽
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
list: [1, 2, 3],
allLoaded: false,//这个变量默认为false 当上拉加载没有数据是 可以让其变成true 停止上拉加载,
topStatus: "", // 这个是下拉插槽的数据 当做判断条件使用
bottomStatus: ""// 这个是上拉插槽的数据 当做判断条件使用
},
methods: {
loadTop() {
this.$refs.loadmore.onTopLoaded();
console.log(1)//下拉刷新 这里可以发送异步请求
},
loadBottom() { // 若数据已全部获取完毕
this.$refs.loadmore.onBottomLoaded()
console.log(2)//上拉加载 这里可以发送异步请求
}
}
})
</script>
如果说你在手ios 或者在chrome中手机调试测试时可能会遇到 无限下拉加载 或者下拉加载不了的兼容性问题 这是你只用在外部添加一个盒子 给盒子添加样式overflow:aotu 就可以完美解决这个问题了
//给test 添加以下样式
<style>
.test {
overflow: auto;//解决兼容性问题
-webkit-overflow-scrolling: touch;//这个是在ios中上拉的更加流畅
}
</style>