mint-ui loadmore使用方法和註意事項
阿新 • • 發佈:2019-03-20
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使用方法和註意事項