php 手机 下拉显示更多,在移动端mint-ui loadmore实现下拉刷新上拉显示更多

这次给大家带来在移动端mint-ui loadmore实现下拉刷新上拉显示更多，在移动端mint-ui loadmore实现下拉刷新上拉显示更多的注意事项有哪些，下面就是实战案例，一起来看一下。

mintui是饿了么团队针对vue开发的移动端组件库，方便实现移动端的一些功能,这里主要给大家介绍vue2 mint-ui loadmore实现下拉刷新,上拉更多功能，具体代码如下所示：

Pull up

在列表底部, 按住 - 上拉 - 释放可以获取更多数据

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 <= 10; i++) {

this.list.push(lastValue + i);

}

} else {

this.allLoaded = true;

}

this.$refs.loadmore.onBottomLoaded();

}, 1500);

},

handleTopChange(status) {

this.moveTranslate = 1;

this.topStatus = status;

},

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);

},

},

created() {

for (let i = 1; i <= 20; i++) {

this.list.push(i);

}

},

mounted() {

this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;

}

};

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：