Flask接口签名sign原理与实例代码浅析
241
2023-02-12
vue2 mint
mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里主要给大家介绍vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,具体代码如下所示:
在列表底部, 按住 - 上拉 - 释放可以获取更多数据
translate : {{ translate }}
translateScale : {{ moveTranslate }}
↓
↑
.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-listihttp://tem {
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 {
http:// 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;
}
};
总结
以上所述是给大家介绍的vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~