移动端使用mint-ui组件loadmore填坑
Posted lijianming180
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端使用mint-ui组件loadmore填坑相关的知识，希望对你有一定的参考价值。
??链接地址为 https://mint-ui.github.io/docs/#/en2/loadmore ,这里需要注意引入的方式，我这里是用cdn的方式引入的。请结合官方API阅读本文章。
2、在vue中注册对应组件loadmore
??具体代码位置如下（也可使用全局注册）
1
2
3
4
5
6
7
8
9
10
11
12
| new Vue({
el:'#app',
data:{
//...
},
methods:{
//...
},
components:{
loadmore
}
})
|
3、在view结构中写标签<loadmore></loadmore>
??代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div style="height:94vh;overflow:scroll;"> //父级元素必须加高度，加滚动条
<loadmore :top-method="loadTop" //关联下拉刷新函数
@top-status-change="handleTopChange" // 关联下拉刷新的自定义文案的状态
@bottom-status-change="handleBottomChange"
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded" //该值为true则不能上拉，所以要手动控制
:auto-fill="false" //初次进入页面是否填满页面
ref="loadmore"> //绑定需要操作的ele
<div slot="top"></div> //提示文案必须紧靠<loadmore>标签的内部写
<div style='overflow: scroll;height:90%;min-height:94vh;'>
/ 大专栏 移动端使用mint-ui组件loadmore填坑/这里加上最小高度保证没有数据的时候盒子也是撑开的
//...
</div>
<div slot="bottom"></div> //同理也需要紧靠内部写
</loadmore>
</div>
view部分就是这些了
|
4、viewModel部分需要使用自定义函数来配合
??需要自定义的函数有下面几个：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| new Vue({
el:'#app',
data:{
topStatus:'',
bottomStatus:'',
allLoaded:false
},
methods:{
loadTop(){
//...
this.$refs.loadmore.onTopLoaded();// 这里必须调用mint-ui的内置函数onTopLoaded()
},
loadBottom(){
//...
this.allLoaded = true; // 这里别忘了手动修改是否可以继续下拉
this.$refs.loadmore.onBottomLoaded();// 这里必须调用mint-ui的内置函数onBottomLoaded()
},
handleTopChange(status){
this.topStatus = status; // 这个变量也必须我们自己定义
//这个函数主要是用来自定义下拉刷新的状态文字，
},
handleBottomChange(){
// 同理这个是自定义上拉加载的状态文字
}
}
})
|
5、结束
??到这里已经结束了， 但是移动端就复杂在手机型号太多了，很多时候不能做到兼容所有手机，该组件也是无法兼容所有手机的，目前已知有问题的手机型号为oppo r11和小米Mix2。
以上是关于移动端使用mint-ui组件loadmore填坑的主要内容，如果未能解决你的问题，请参考以下文章
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
mint-ui的Loadmore组件使用示例
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法
vue和mintui-Loadmore结合实现下拉刷新，上拉加载 （待优化）
Mint-ui（基于 Vue.js 的移动端组件库）的使用