<template><div class="director-mail"><mt-header fixed title="標題"><router-link to="/" slot="right"><mt-button>右側文字</mt-button></router-link></mt-header><!--主要內容--><div class="page-loadmore"><div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }"><mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange":bottom-all-loaded="allLoaded" ref="loadmore"><ul class="page-loadmore-list"><li v-for="item in list" class="page-loadmore-listitem">{{ item }}</li></ul><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></div> </template><script>export default {data() {return {list: [],allLoaded: false,bottomStatus: '',wrapperHeight: 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);}},created() {for (let i = 1; i <= 10; i++) {this.list.push(i);}},mounted() {this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;},}; </script><style lang='less'>.director-mail {.page-loadmore {
margin-top: 40px; /*mt-loadmore控件的父級必須加此屬性否則下拉的loadBottom事件不會生效 */overflow: scroll;.page-loadmore-list {　　/*列表ul元素必須加一個最小高度（li的高度*li初始渲染數量）否則ajax獲取數據時，會自動多次觸發loadBottom事件，導致數據加載完畢*/　
　　　　　　　　　　min-height:1000px; .page-loadmore-listitem {height: 100px;line-height: 100px;border-bottom: solid 1px #eee;text-align: center;}}.mint-loadmore-bottom {span {display: inline-block;transition: .2s linear;vertical-align: middle;}.mint-spinner {display: inline-block;vertical-align: middle;}}}}</style>

　　

轉載于:https://www.cnblogs.com/kerryw/p/9166407.html

總結

以上是生活随笔為你收集整理的mint-ui的Loadmore组件使用示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。