1. 程式人生 > >mint-ui loadmore使用方法和註意事項

mint-ui loadmore使用方法和註意事項

and bound app over vue 就是 -o tom 技術

最好按照github裏的例子ctrl+c => v 模版、js

技術分享圖片

mint-ui/example/pages/pull-up.vue

註意設置:mt-loadmore組件:auto-fill=‘autoFill‘為false,以防止上來無限請求
    :給mt-loadmore父組件css:overflow: scroll;防止華為手機和蘋果模式下瀏覽器手機測試上拉無效
    :給mt-loadmore父組件css:-webkit-overflow-scrolling: touch;防止蘋果手機拖動生澀
    :給mt-loadmore父組件高度:style="{ height: wrapperHeight + ‘px‘ }

1 mounted() {
2   this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
3 }

上邊這個是官方方法,用來去除輕微上拉就觸發檢測機制從而加載下一頁的BUG

    :不要忘記判斷加載完成全部後臺傳來的數據列表後,this.allLoaded = true;知會禁止上拉加載

相關理解:loadBottom()是上拉加載的方法,當用戶上拉超過閥值,觸發加載就是調用這個方法。請進行相關請求操作,請求完成後調用this.$refs.loadmore.onBottomLoaded()方法通知loadmore組件加載完成,進而自動更新status

1 handleBottomChange(status) {
2   this.bottomStatus = status;
3 }

這個官方方法照搬就行了,用來綁定loadmore狀態到vue實例的,通過這個值來更新顯示給用戶看的狀態

mint-ui loadmore使用方法和註意事項