vue.js + mint-ui 在移動端實現上拉載入-下拉重新整理效果
開發移動端 webApp
經常會遇到列表頁需要下拉重新整理(pull-down)和上拉載入更多(pull-up)的場景,這裡介紹一下使用 Vue.js 開發時配合 Mint-UI 的 <Loadmore />
元件實現這一功能。
Mint UI 的文件寫的還是比較詳細的,如果有文件看不懂地方,結合github上原始碼具體實現喝issue提問,基本就能解決9成問題了。
根據 官方文件 介紹,快速安裝 Mint Ui,然後引入到頁面中。
template
如下:
<template> <div class="list"> <x-header>上拉載入,下拉重新整理</x-header> <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }"> <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange" ref="loadmore"> <ul> <li class="page-loadmore-listitem" :key="item" v-for="item in list">{{ item }}</li> </ul> <div slot="top" class="mint-loadmore-top"> <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span> <span v-show="topStatus === 'loading'"> <mt-spinner type="snake"></mt-spinner> </span> </div> <div slot="bottom" class="mint-loadmore-bottom"> <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span> <span v-show="bottomStatus === 'loading'"> <mt-spinner type="snake"></mt-spinner> </span> </div> </mt-loadmore> </div> </div> </template>
script
程式碼如下:
<script> import { Spinner } from 'mint-ui'; export default { data() { return { list: [], topStatus: '', bottomStatus: '', wrapperHeight: 0, allLoaded: false, } }, components: { 'mt-spinner': Spinner, // 或者使用 Vue.component(Spinner.name, Spinner) 註冊元件 'mt-loadmore': Loadmore, }, methods: { handleTopChange(status) { console.log(status); this.topStatus = status; }, handleBottomChange(status) { console.log('handleBottomChange ', status); this.bottomStatus = status; }, loadTop() { console.log('loadTop'); setTimeout(() => { let firstValue = this.list[0]; for (let i = 1; i <= 10; i++) { this.list.unshift(firstValue - i); } this.$refs.loadmore.onTopLoaded(); console.log('load top end'); }, 2000); }, loadBottom() { setTimeout(() => { let lastValue = this.list[this.list.length - 1]; if (lastValue <= 60) { for (let i = 1; i <= 10; i++) { this.list.push(lastValue + i); } } else { this.allLoaded = true; // 若資料已全部獲取完畢 } this.$refs.loadmore.onBottomLoaded();// 固定方法,查詢完要呼叫一次,用於重新定位 console.log('loadBottom end, this.allLoaded = ', this.allLoaded); }, 1500); }, }, created() { for (let i = 0; i < 20; i++) { this.list.push(i); } }, mounted() { this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top; } } </script>
style
程式碼如下:
<style lang="scss"> body { margin: 0; background-color: #fafafa; } ul,li{ padding:0;margin:0;list-style:none}; .page-loadmore-wrapper { overflow: scroll; // 很重要 -webkit-overflow-scrolling : touch; // 解決view滑動速度慢或者卡頓問題 } .page-loadmore-listitem { height: 50px; line-height: 50px; border-bottom: 1px solid #eee; } .mint-loadmore-top { span { display: inline-block; transition: .2s linear; vertical-align: middle; } span.is-rotate { transform: rotate(180deg); } } .mint-loadmore-bottom { span { display: inline-block; transition: .2s linear; vertical-align: middle; } span.is-rotate { transform: rotate(180deg); } } </style>
預覽一下效果:
遇到的問題
- pull-up事件
loadBottom
無法觸發,pull-down事件loadTop
卻正常,原因是因為沒有限制<mt-loadmore >
的父元件高度,同時也需要給父容器新增overflow:scroll
屬性 - 在手機上測試發現
wrapper
容器在滑動時有些慢、卡頓的現象,新增css屬性-webkit-overflow-scrolling : touch;
可解,原因是啟用了硬體加速 -
wrapperHeight
高度一定要小於列表的高度才可以pull up