## 複製程式碼就能用 通過$emit 觸發 on監聽
loadmore.vue頁面 <template> <div class="page-loadmore"> <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }"> <mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" :autoFill="false" ref="loadmore"> <slot></slot> <div slot="top" class="mint-loadmore-top"> <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span> <span v-show="topStatus === 'loading'"> <span v-show="topStatus === 'drop'">釋放更新</span> <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> <style scoped>
.loading-background, .mint-loadmore-top span { -webkit-transition: .2s linear; transition: .2s linear } .mint-loadmore-top span { display: inline-block; vertical-align: middle }
.mint-loadmore-top span.is-rotate { -webkit-transform: rotate(180deg); transform: rotate(180deg) }
.page-loadmore .mint-spinner { display: inline-block; vertical-align: middle }
.page-loadmore-desc { text-align: center; color: #666; padding-bottom: 5px }
.page-loadmore-desc:last-of-type, .page-loadmore-listitem { border-bottom: 1px solid #eee }
.page-loadmore-listitem { height: 50px; line-height: 50px; text-align: center }
.page-loadmore-listitem:first-child { border-top: 1px solid #eee }
.page-loadmore-wrapper { overflow: scroll }
.mint-loadmore-bottom span { display: inline-block; -webkit-transition: .2s linear; transition: .2s linear; vertical-align: middle }
.mint-loadmore-bottom span.is-rotate { -webkit-transform: rotate(180deg); transform: rotate(180deg) }
</style>
<script type="text/babel"> export default { name:"c_loadMore", data() { return { list: [], allLoaded: false,
bottomStatus: '', wrapperHeight: 0,
topStatus: '', //wrapperHeight: 0, translate: 0, moveTranslate: 0 }; },
methods: { handleBottomChange(status) { this.bottomStatus = status; }, //上拉載入更多 loadBottom() { // setTimeout(() => { // let lastValue = this.list[this.list.length - 1]; // if (lastValue < 40) { // for (let i = 1; i <= 10; i++) { // this.list.push(lastValue + i); // } // } else { // this.allLoaded = true; // } // this.$refs.loadmore.onBottomLoaded(); // }, 1500); this.$emit("loadBottom"); },
handleTopChange(status) { this.moveTranslate = 1; this.topStatus = status; }, onTopLoaded() { this.$refs.loadmore.onTopLoaded(); }, onBottomLoaded() { this.$refs.loadmore.onBottomLoaded(); }, setAllLoaded(val){ this.allLoaded = val; }, translateChange(translate) { const translateNum = +translate; this.translate = translateNum.toFixed(2); this.moveTranslate = (1 + translateNum / 70).toFixed(2); }, loadTop() { // setTimeout(() => { // let firstValue = this.list[0]; // for (let i = 1; i <= 10; i++) { // this.list.unshift(firstValue - i); // } // this.$refs.loadmore.onTopLoaded(); // }, 1500); this.$emit("loadTop"); },
},
created() { // for (let i = 1; i <= 20; i++) { // this.list.push(i); // } },
mounted() { this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top; } }; </script>


## 需要引入頁面 <template> <div> <Cloadmore @loadBottom="loadBottom" @loadTop="loadTop" ref="listTopic">
<!-- 放入要載入的資料 --> <Cloadmore> </div> </template>
<script> import Cloadmore from 'loadmore.vue' export default { data () { return { loader: false } }, created(){ ### 建議把網路請求進行封裝 本人在做專案是發現loadbottom進入頁面就會載入 不知是本人樣式原因還是怎麼 首頁資料載入時中是頁面捲去一點 。 最後 請求資料成功後設置scrollTop解決 this.$refs.listTopic.onBottomLoaded(); setTimeout(function () { document.querySelector('.page-loadmore-wrapper').scrollTop = 0; }, 0) }, methods: { loadBottom() { let self = this; if(!this.loader){ return; }; setTimeout(() => { // 傳送請求載入資料 資料請求成功設定為loader為 true self.$refs.listTopic.onBottomLoaded();
}, 2000); }, loadTop() { let self = this; setTimeout(() => { // 傳送請求載入資料 資料請求成功設定為loader為 true self.$refs.listTopic.onTopLoaded(); }, 1500); }, }, components: { Cloadmore // 引入的組建 } } </script>