基于vuejs开发v-ui的由来为个人最开始打算将h5项目中用到的控件封装成类似于原生android和ios控件库的样子,下次用的时候直接拿来用而不是重新实现一套。现在移动端ui框架有很多,风格各异且基本上都有一个问题没有做解决,比如alert弹出的时候没有处理用户点击返回的逻辑,经常性的情况是用户点击返回时整个页面返回。这是一个及其糟糕的用户体验,所以自定义了一套用于后期项目中。下面进入主题关于v-ui的Pull2Refresh
Pull2Refresh:即下拉刷新上拉加载更多,这其中牵涉到处理滚动的逻辑,在h5中,处理滚动效果较好的有iScroll和better-scroll,v-ui基于vuejs开发,而better-scroll也是基于vuejs开发的,所以在做这个Pull2Refresh的时候采用了better-scroll做滚动,Pull2Refresh实现功能有下拉更新,上拉加载更多,自动更新。其中自动更新应用场景为用户打开列表时,优先从本地缓存获取数据,从而实现快速显示列表,由于缓存数据可能也不是最新数据,所以调用Pull2Refresh的startRefresh方法进行加载数据,从而实现数据更新。Pull2Refresh效果见下图,由于是gif格式,所以效果不是十分理想,推荐使用手机扫描下面二维码进行体验会有很好更真实的效果。具体使用请参考源码中App.vue文件
项目github地址v-ui
预览地址:v-ui(使用浏览器时请调整到手机模式下体验)
扫码预览(推荐)