2 Star 2 Fork 15

攀哥哥 / vue-scroll-mobile-demo

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

vue-scroll-mobile-demo

  • 该项目是一个演示了 web app 各大【scroll view】主流插件的用法,主要面向 vue 项目开发者,使用 vux 作为项目骨架,scroll view 采用图文的方式进行布局,可以无限加载数据,用于测试各大插件在滑动的过程中是否卡顿,滑动效果是否自然,比较了8种较为主流的 scroll view 插件(具体见插件比较),并对 mescroll 进行了源代码上的封装,对 better-scroll 进行了使用上的封装。

1.扫码快速体验(使用手机浏览器打开)

二维码

2.安装与运行

  npm install
  npm run dev

3.项目打包

  npm run build

4.演示部分界面截图(4种,其他插件效果安装体验)

图一加载失败 图二加载失败

图三加载失败 图四加载失败

5.插件比较

scroll view 8款插件比较
插件名称 GitHub 说明
vux https://github.com/airyland/vux 基于 vue 与 weui 移动端组件库,但该 scroller 组件官方称已经不再维护,建议使用第三方插件。优点:无论 Android 还是 iOS,scroll view 都可以产生回弹效果,缺点:滑动卡顿、不自然,局限于 vux 框架之中
better-scroll https://github.com/ustbhuangyi/better-scroll 算是 GitHub 上 star 最多的插件了,很多项目在使用,详细介绍见官网。优点:作者更新频繁,非常上心(上次我凌晨2点多提了个issue,十分钟之后就回复了),使用者较多,功能也非常丰富,具有有回弹效果,纯文字列表滑动也比较自然。缺点:官方文档较为简陋(仅仅是一些参数的介绍),基于vue的demo对初学者来说难度稍大,图文列表滑动不太自然,且加载的数据越多越为明显,尤其是在低端安卓机或iPhone5/6上滑动过程中会跳跃式的回闪
vue-scroller https://github.com/wangdahoo/vue-scroller 基于 Vue 的 滑动插件,支持下拉刷新和上拉加载,支持自定义下拉刷新/上拉加载/无数据 dom 等。优点:具有有回弹效果,使用简单,官方demo齐,上手较为简单。缺点:图文列表,当数据加载到一定程度后会比较卡顿;使用上仅限于vue
mescroll https://github.com/mescroll/mescroll 精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器,定制化非常高,默认UI很精致。优点:文档齐全,官方例子非常多,非常容易使用,具有回到顶部等贴心功能。缺点:无回弹效果,在iOS上使用下拉刷新会与iOS浏览器默认回弹效果冲突
vue-infinite-scroll https://github.com/ElemeFE/vue-infinite-scroll 饿了么出品,封装成 vue 指令,代码简洁,但是功能较为简单。优点:可对源代码进行定制化开发。缺点:功能非常简单,仅支持无限加载,且不能定制化dom
vue-infinite-loading https://github.com/PeachScript/vue-infinite-loading 功能和 vue-infinite-scroll 类似,仅支持无限加载,但是以组件方式进行封装。优点:代码简明易懂,有官方示例,文档齐全,支持横向scroll。缺点:功能简单,不支持下拉刷新,仅限于vue
VueMugenScroll https://github.com/egoist/vue-mugen-scroll 一款无限加载插件,使用上也比较简单。优点:参数较少,新手比较容易上手。缺点:功能单一,不支持下拉刷新,仅限于vue
Scrollload https://github.com/fa-ge/Scrollload 一款下拉刷新,上拉加载的移动端插件,无任何依赖,对iOS局部滚动的坑进行了较为全面的分析。优点:示例丰富,对iOS回弹效果和项目回弹效果的冲突提出了较为全面的解决方案。缺点:对vue的支持不是很友好,解决局部滚动问题会依赖于其他库

6.总结

  • 1.scroll view 插件非常多,但实现方式无非是两种

    • 1-1.自己使用 css3 transform 来实现滚动动画,可以很好的实现回弹效果,但很难掌控,所以会造成滑动不自然,上述插件vux、better-scroll、vue-scroller都是使用的该方案
    • 1-2.使用原生div效果(overflow-y:auto)来实现滑动,滑动效果会较为自然,但安卓上无回弹效果,且滑动事件易于iOS默认滑动事件冲突,上述插件其余5种使用的该方案。
  • 2.better-scroll 官方demo相对新手来说较为复杂,vue-scroll-mobile-demo 中对 better-scroll 进行了使用上的封装(基于vue)

  • 3.mescroll 在 vue 中使用存在一些弊端(如组件在deactivated时未注销滑动事件,在deactivated时未销毁回到顶部图片),vue-scroll-mobile-demo 对 mescroll 的源代码进行了相应的完善。

  • 4.个人观点:项目中 scroll view 为文字列表且滚动加载数据较少时,可使用 better-scroll,毕竟滴滴也在用,使用者很多。项目中 scroll view 为图文列表时,且需要无限加载数据时使用 mescroll,可参照官方示例。

The MIT License (MIT) Copyright (c) 2017 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

web app 主流 scroll view/瀑布流/无限加载插件用法及对比,无限加载终极解决方案 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/pangege/vue-scroll-mobile-demo.git
git@gitee.com:pangege/vue-scroll-mobile-demo.git
pangege
vue-scroll-mobile-demo
vue-scroll-mobile-demo
master

搜索帮助

14c37bed 8189591 565d56ea 8189591