vue2 mint-ui loadmore实现下拉刷新,上拉更多功能

2022-01-14,,,,

这篇文章主要介绍了vue2 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) }

总结

以上就是vue2 mint-ui loadmore实现下拉刷新,上拉更多功能的详细内容,更多请关注本站其它相关文章!

《vue2 mint-ui loadmore实现下拉刷新,上拉更多功能.doc》

下载本文的Word格式文档,以方便收藏与打印。