• This project is a demonstration of the usage of major 【 Scroll View 】 mainstream plug-ins of Web App, mainly for VUE project developers, using VUX as the skeleton of the project, Scroll View adopts the way of graphic layout, can load unlimited data. It is used to test whether the major plug-ins are stuck in the sliding process and whether the sliding effect is natural. It compares 8 mainstream Scroll view plug-ins (see plug-in comparison for details), and encapsulates mescroll source code and Better-Scroll usage.

1. Quick scan experience (open with mobile browser)

2. Installation and operation

  npm install

  npm run dev

Copy the code

3. Package the project

  npm run build

Copy the code

4. Demo some interface screenshots (4 kinds, other plug-in effect installation experience)

5. Plug-in comparison

Scroll View 8 plug-ins comparison
The plug-in name GitHub instructions
vux https://github.com/airyland/vux Based on vUE and WeUI mobile component library, but the scroller component is officially no longer maintained, it is recommended to use third-party plug-ins. Advantages: No matter Android or iOS, scroll view can produce rebound effect. Disadvantages: Slow and unnatural sliding, limited to VUX framework
better-scroll https://github.com/ustbhuangyi/better-scroll It is the most plug-ins for STAR on GitHub, and many projects are using it. See the official website for details. Advantages: The author updates frequently and is very careful (LAST time I raised an issue at 2 am and replied ten minutes later). There are many users and rich functions, with rebound effect and natural sliding of pure text list. Disadvantages: The official documentation is relatively simple (just some parameter introduction), the VUe-based demo is a little difficult for beginners, the slide of text list is not natural, and the more data loaded, the more obvious, especially on low-end Android or iPhone5/6, the slide will skip back
vue-scroller https://github.com/wangdahoo/vue-scroller Vue based sliding plug-in, support pull down refresh and pull up loading, support custom pull down refresh/pull up loading/no data DOM, etc. Advantages: have a rebound effect, simple to use, official demo, relatively simple to get started. Disadvantages: Graphic list, when the data loaded to a certain extent will be more sluggish; Use is limited to VUE
mescroll https://github.com/mescroll/mescroll Delicate pull-down refresh and pull-up load JS framework. Vue support, perfect for mobile and mainstream PC browsers, very high customization, the default UI is exquisite. Pros: Well-documented, lots of official examples, very easy to use, intimate features like back to the top. Disadvantages: No rebound effect, using the drop-down refresh on iOS will conflict with the default rebound effect of iOS browser
vue-infinite-scroll https://github.com/ElemeFE/vue-infinite-scroll Produced by Ele. me, packaged into VUE instructions, simple code, but relatively simple function. Advantages: The source code can be customized development. Cons: Very simple, unlimited loading only, and no DOM customization
vue-infinite-loading https://github.com/PeachScript/vue-infinite-loading The function is similar to vue-infinite-Scroll, which only supports infinite loading but is encapsulated as a component. Advantages: the code is simple and easy to understand, there are official examples, complete documentation, support horizontal scroll. Disadvantages: Simple function, does not support pull-down refresh, limited to VUE
VueMugenScroll https://github.com/egoist/vue-mugen-scroll An infinite loading plug-in, relatively simple to use. Advantages: fewer parameters, relatively easy to use novice. Disadvantages: Single function, no support for pull-down refresh, limited to VUE
Scrollload https://github.com/fa-ge/Scrollload A pull-down refresh, pull-up loading mobile terminal plug-in, without any dependence, the iOS local scroll pit has carried on a more comprehensive analysis. Advantages: Rich examples, the iOS rebound effect and project rebound effect of the conflict proposed a more comprehensive solution. Cons: VUE support is not very friendly and relies on other libraries to solve partial scrolling problems

6. Summary

  • 1. There are many scroll view plug-ins, but there are no more than two ways to implement them

    • 1-1. Css3 Transform is used to realize rolling animation, which can well realize the rebound effect, but it is difficult to control, so it will cause unnatural sliding. The above-mentioned plug-ins VUX, BETTER-Scroll and VUE-Scroller all use this scheme
    • 1-2. Use the native DIV effect (overflow-y:auto) to realize sliding. The sliding effect will be more natural, but there is no rebound effect on Android, and the sliding event is easy to conflict with the default sliding event on iOS.

  • 2. The official demo of Better Scroll is relatively complex for beginners, vue-scroll-mobile demo encapsulate better Scroll in use (based on VUE)

  • 3. Mescroll has some drawbacks when used in VUE (such as component does not cancel slide event when deactivated, does not destroy when deactivated back to top image), Vue-scroll -mobile- Demo improves the mescroll source code accordingly.

  • 4. Personal opinion: In a project, when the scroll view is a text list and the scrolling loading data is small, better Scroll can be used. After all, Didi is also being used by many users. In the project, mescroll is used when the scroll view is a list of texts and texts and unlimited data loading is required. Please refer to the official example.

7. Project links

  • vue-scroll-mobile-demo