这篇文章主要介绍了如何封装了一个vue移动端下拉加载下一页数据的组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前言
简单封装了一个vue下拉加载组件，分享一下，已放到github和前端资源库，欢迎下载！
组件代码
加载中
加载完成没有数据了 .allow{ overflow:hidden; height: auto; } .prohibit{ max-width: 100%; max-height: 100%; height: 100%; overflow:hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; will-change: transform; transition: all 450ms; backface-visibility: hidden; perspective: 1000; } .my-scroll{ position: relative; color: #999; .scroll-top{ text-align: center; display:flex; position:absolute; top:0; left:0; width:100%; overflow: hidden; } .scroll-list{ overflow:hidden; min-height: 100%; } .scroll-bottom{ text-align: center; line-height: .8rem; div{ display:flex; height:auto; width:100%; justify-content: center; align-items:center; flex-wrap: wrap; i{ flex:1 0 100%; display:block; height: 0.4rem; } img{ width:0.6rem; } p{ flex:1 0 100%; } } } }
使用
{{item.name}} #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .scrolls{ font-size:.24rem; } .list{ height:.9rem; line-height: .9rem; margin-bottom:.1rem; border-bottom:1px solid #dedede; color:#999; font-size:.28rem; }
组件已放到github，欢迎下载和star
可以直接在vue项目中运行这个组件
github地址：https://github.com/confidence68/vue_mobile_scrollLoadpage
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是如何封装了一个vue移动端下拉加载下一页数据的组件的详细内容，更多请关注本站其它相关文章！
