本篇文章主要介绍vue2.0 移动端实现下拉刷新和上拉加载更多的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本人正在基于 vue2.0 + webpack + es6 搭建前端架构，整理了部分插件，下面这个是下拉更新 上拉更多的，挺好用的，分享给大家。
直接上代码，不懂的多看几遍，下面我换会告诉大家如何使用。
<div class="yo-scroll"> <section class="inner"> <header class="pull-refresh"> <span class="down-tip">下拉更新</span><span class="up-tip">松开更新</span><span class="refresh-tip">更新中</span></header><footer class="load-more"> <span>加载中……</span></footer></section></div> .yo-scroll { position: absolute; top: 2.5rem; right: 0; bottom: 0; left: 0; overflow: auto; -webkit-overflow-scrolling: touch; background-color: #ddd } .yo-scroll .inner { position: absolute; top: -2rem; width: 100%; transition-duration: 300ms; } .yo-scroll .pull-refresh { position: relative; left: 0<mark style="color:transparent">本文来源gaodaimacom搞#^代%!码网@</mark>; top: 0; width: 100%; height: 2rem; display: flex; align-items: center; justify-content: center; } .yo-scroll.touch .inner { transition-duration: 0ms; } .yo-scroll.down .down-tip { display: block; } .yo-scroll.up .up-tip { display: block; } .yo-scroll.refresh .refresh-tip { display: block; } .yo-scroll .down-tip, .yo-scroll .refresh-tip, .yo-scroll .up-tip { display: none; } .yo-scroll .load-more { height: 3rem; display: flex; align-items: center; justify-content: center; }
把上面组件拷贝一下，存成后缀是.vue的组件放到你的component下， 然后引入到页面 , 下面是我引用的demo
上代码： 里面有注释哦，有问题给我留言！
<div> <ul> <li>{{item.name}}</li><li>{{item.name}}</li></ul></div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue2.0 移动端实现下拉刷新和上拉加载更多的示例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue2.0 移动端实现下拉刷新和上拉加载更多的示例
转载请注明原文链接：vue2.0 移动端实现下拉刷新和上拉加载更多的示例
