How to pull down and refresh mint-ui loadmore in vue2, pull up more multi-function

In this article Xiaobian for you to introduce in detail "vue2 mint-ui loadmore how to achieve pull-down refresh, pull up more multi-function", detailed content, clear steps, details handled properly, hope that this "vue2 mint-ui loadmore how to achieve drop-down refresh, pull up more multi-functional" article can help you solve doubts, the following with the editor's ideas slowly in-depth, together to learn new knowledge.

The specific code is as follows:

Pull up is at the bottom of the list. Press-pull-release to get more data.

Translate: {{translate}}

TranslateScale: {{moveTranslate}} {{item}} ↓ ↑ .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)} export default {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 {let firstValue = this.list [0]; for (let I = 1; I