鏈接地址為 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。
