&img src=&/50/v2-e9d69ad2d12ec884800fa_b.jpg& data-rawwidth=&500& data-rawheight=&375& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&/50/v2-e9d69ad2d12ec884800fa_r.jpg&&&p&在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了。 以滴滴为例，可以是这样竖向滚动的列表，如图所示：&/p&&img src=&/v2-f196ded35dc1fffa3d55ce_b.jpg& data-rawwidth=&700& data-rawheight=&1218& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&/v2-f196ded35dc1fffa3d55ce_r.jpg&&也可以是横向滚动的导航栏，如图所示：&img src=&/v2-ed2e506d54bd5ae763efb55b0c36b679_b.jpg& data-rawwidth=&658& data-rawheight=&98& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-ed2e506d54bd5ae763efb55b0c36b679_r.jpg&&&blockquote&&p&可以打开“微信 —& 钱包—&滴滴出行”体验效果。&/p&&/blockquote&&p&我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll。&/p&&h2&什么是 better-scroll&/h2&&p&&a href=&/?target=https%3A///ustbhuangyi/better-scroll& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&better-scroll&i class=&icon-external&&&/i&&/a& 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在&a href=&/?target=https%3A///ustbhuangyi/better-scroll/issues/36& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这里&i class=&icon-external&&&/i&&/a&。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。&/p&&h3&better-scroll 的滚动原理&/h3&&p&不少同学可能用过 better-scroll，我收到反馈最多的问题是：&/p&&blockquote&&p&我的 better-scroll 初始化了， 但是没法滚动。&/p&&/blockquote&&p&不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理：&br&浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。&/p&&p&那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构：&/p&&br&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&class&/span&&span class=&o&&=&/span&&span class=&s&&&wrapper&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&ul&/span& &span class=&na&&class&/span&&span class=&o&&=&/span&&span class=&s&&&content&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&li&/span&&span class=&p&&&&/span&...&span class=&p&&&/&/span&&span class=&nt&&li&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&li&/span&&span class=&p&&&&/span&...&span class=&p&&&/&/span&&span class=&nt&&li&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&ul&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&为了更加直观，我们再来看一张图：&/p&&img src=&/v2-71a1e5fbbb39fa4a99f96ecc333a1927_b.jpg& data-rawwidth=&830& data-rawheight=&632& class=&origin_image zh-lightbox-thumb& width=&830& data-original=&/v2-71a1e5fbbb39fa4a99f96ecc333a1927_r.jpg&&&p&绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。&/p&&p&那么，我们怎么初始化 better-scroll 呢，如果是上述 html 结构，那么初始化代码如下：&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper, {})
&/code&&/pre&&/div&&p&better-scroll 对外暴露了一个 BScroll 的类，我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象，第二个是一些配置参数，具体参考 &a href=&/?target=https%3A///ustbhuangyi/better-scroll& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&better-scroll 的文档&i class=&icon-external&&&/i&&/a&。&/p&&p&better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。所以同学们反馈的 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对，或者是当 DOM 结构发送变化的时候并没有重新计算 better-scroll。&/p&&h2&better-scroll 遇见 Vue&/h2&&p&相信很多同学对 &a href=&/?target=https%3A///vuejs/vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vue.js&i class=&icon-external&&&/i&&/a& 都不陌生，当 better-scroll 遇见 Vue，会擦出怎样的火花呢？&/p&&h3&如何在 Vue 中使用 better-scroll&/h3&&p&很多同学开始接触使用 better-scroll 都是受到了我的一门教学课程——&a href=&/?target=http%3A///class/74.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《Vue.js高仿饿了么外卖App》&i class=&icon-external&&&/i&&/a& 的影响。在那门课程中，我们把 better-scroll 和 Vue 做了结合，实现了很多列表滚动的效果。在 Vue 中的使用方法如下：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&template&
&div class=&wrapper& ref=&wrapper&&
&ul class=&content&&
&li&...&/li&
&li&...&/li&
&/template&
import BScroll from 'better-scroll'
export default {
mounted() {
this.$nextTick(() =& {
this.scroll = new Bscroll(this.$refs.wrapper, {})
&/code&&/pre&&/div&&p&Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.wrapper访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。&/p&&p&这里的 this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染，感兴趣的同学可以了解一下它的&a href=&/?target=https%3A///vuejs/vue/blob/dev/src/core/util/env.js%23L66-L122& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&内部实现细节&i class=&icon-external&&&/i&&/a&，底层用到了 MutationObserver 或者是 setTimeout(fn, 0)。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的（20 ms 是一个经验值，每一个 Tick 约为 17 ms），对用户体验而言都是无感知的。&/p&&h3&异步数据的处理&/h3&&p&在我们的实际工作中，列表的数据往往都是异步获取的，因此我们初始化 better-scroll 的时机需要在数据获取后，代码如下：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&template&
&div class=&wrapper& ref=&wrapper&&
&ul class=&content&&
&li v-for=&item in data&&{{item}}&/li&
&/template&
import BScroll from 'better-scroll'
export default {
created() {
requestData().then((res) =& {
this.data = res.data
this.$nextTick(() =& {
this.scroll = new Bscroll(this.$refs.wrapper, {})
&/code&&/pre&&/div&&p&这里的 requestData 是伪代码，作用就是发起一个 http 请求从服务端获取数据，并且这个函数返回的是一个 promise（实际项目中我们可能会用 &a href=&/?target=https%3A///mzabriskie/axios& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&axios&i class=&icon-external&&&/i&&/a& 或者 &a href=&/?target=https%3A///pagekit/vue-resource& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-resource&i class=&icon-external&&&/i&&/a&）。我们获取到数据的后，需要通过异步的方式再去初始化 better-scroll，因为 Vue 是数据驱动的， Vue 数据发生变化（this.data = res.data）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick，当然替换成 setTimeout(fn, 20) 也是可以的。&/p&&p&为什么这里在 created 这个钩子函数里请求数据而不是放到 mounted 的钩子函数里？因为 requestData 是发送一个网络请求，这是一个异步过程，当拿到响应数据的时候，Vue 的 DOM 早就已经渲染好了，但是数据改变 —& DOM 重新渲染仍然是一个异步过程，所以即使在我们拿到数据后，也要异步初始化 better-scroll。&/p&&h3&数据的动态更新&/h3&&p&我们在实际开发中，除了数据异步获取，还有一些场景可以动态更新列表中的数据，比如常见的下拉加载，上拉刷新等。比如我们用 better-scroll 配合 Vue 实现下拉加载功能，代码如下：&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&template&/span&&span class=&o&&&&/span&
&span class=&o&&&&/span&&span class=&nx&&div&/span& &span class=&kr&&class&/span&&span class=&o&&=&/span&&span class=&s2&&&wrapper&&/span& &span class=&nx&&ref&/span&&span class=&o&&=&/span&&span class=&s2&&&wrapper&&/span&&span class=&o&&&&/span&
&span class=&o&&&&/span&&span class=&nx&&ul&/span& &span class=&kr&&class&/span&&span class=&o&&=&/span&&span class=&s2&&&content&&/span&&span class=&o&&&&/span&
&span class=&o&&&&/span&&span class=&nx&&li&/span& &span class=&nx&&v&/span&&span class=&o&&-&/span&&span class=&k&&for&/span&&span class=&o&&=&/span&&span class=&s2&&&item in data&&/span&&span class=&o&&&&/span&&span class=&p&&{{&/span&&span class=&nx&&item&/span&&span class=&p&&}}&/span&&span class=&o&&&&/span&&span class=&err&&/li&&/span&
&span class=&o&&&&/span&&span class=&err&&/ul&&/span&
&span class=&o&&&&/span&&span class=&nx&&div&/span& &span class=&kr&&class&/span&&span class=&o&&=&/span&&span class=&s2&&&loading-wrapper&&/span&&span class=&o&&&&&/span&&span class=&err&&/div&&/span&
&span class=&o&&&&/span&&span class=&err&&/div&&/span&
&span class=&o&&&&/span&&span class=&err&&/template&&/span&
&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&import&/span& &span class=&nx&&BScroll&/span& &span class=&nx&&from&/span& &span class=&s1&&'better-scroll'&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&p&&[]&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&created&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&loadData&/span&&span class=&p&&()&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&loadData&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&nx&&requestData&/span&&span class=&p&&().&/span&&span class=&nx&&then&/span&&span class=&p&&((&/span&&span class=&nx&&res&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&data&/span& &span class=&o&&=&/span& &span class=&nx&&res&/span&&span class=&p&&.&/span&&span class=&nx&&data&/span&&span class=&p&&.&/span&&span class=&nx&&concat&/span&&span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&data&/span&&span class=&p&&)&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$nextTick&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&o&&!&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&Bscroll&/span&&span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$refs&/span&&span class=&p&&.&/span&&span class=&nx&&wrapper&/span&&span class=&p&&,&/span& &span class=&p&&{})&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&on&/span&&span class=&p&&(&/span&&span class=&s1&&'touchend'&/span&&span class=&p&&,&/span& &span class=&p&&(&/span&&span class=&nx&&pos&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&c1&&// 下拉动作&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&nx&&pos&/span&&span class=&p&&.&/span&&span class=&nx&&y&/span& &span class=&o&&&&/span& &span class=&mi&&50&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&loadData&/span&&span class=&p&&()&/span&
&span class=&p&&}&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span& &span class=&k&&else&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&refresh&/span&&span class=&p&&()&/span&
&span class=&p&&}&/span&
&span class=&p&&})&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&这段代码比之前稍微复杂一些, 当我们在滑动列表松开手指时候， better-scroll 会对外派发一个 touchend 事件，我们监听了这个事件，并且判断了 pos.y & 50（我们把这个行为定义成一次下拉的动作）。如果是下拉的话我们会重新请求数据，并且把新的数据和之前的 data 做一次 concat，也就更新了列表的数据，那么数据的改变就会映射到 DOM 的变化。需要注意的一点，这里我们对 this.scroll 做了判断，如果没有初始化过我们会通过 new BScroll 初始化，并且绑定一些事件，否则我们会调用 this.scroll.refresh 方法重新计算，来确保滚动效果的正常。&/p&&p&这里，我们就通过 better-scroll 配合 Vue，实现了列表的下拉刷新功能，上拉加载也是类似的套路，一切看上去都是 ok 的。但是，我们发现这里写了大量命令式的代码（这一点不是 Vue.js 推荐的），如果有很多类似滚动的组件，我们就需要写很多类似的命令式且重复性的代码，而且我们把数据请求和 better-scroll 也做了强耦合，这些对于一个追求编程逼格的人来说，就不 ok 了。&/p&&h2&scroll 组件的抽象和封装&/h2&&p&因此，我们有强烈的需求抽象出来一个 scroll 组件，类似小程序的 scroll-view 组件，方便开发者的使用。&/p&&p&首先，我们要考虑的是 scroll 组件本质上就是一个可以滚动的列表组件，至于列表的 DOM 结构，只需要满足 better-scroll 的 DOM 结构规范即可，具体用什么标签，有哪些辅助节点（比如下拉刷新上拉加载的 loading 层），这些都不是 scroll 组件需要关心的。因此， scroll 组件的 DOM 结构十分简单，如下所示：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&template&
&div ref=&wrapper&&
&slot&&/slot&
&/template&
&/code&&/pre&&/div&&p&这里我们用到了 Vue 的特殊元素—— slot 插槽，它可以满足我们灵活定制列表 DOM 结构的需求。接下来我们来看看 JS 部分：&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&script&/span& &span class=&nx&&type&/span&&span class=&o&&=&/span&&span class=&s2&&&text/ecmascript-6&&/span&&span class=&o&&&&/span&
&span class=&kr&&import&/span& &span class=&nx&&BScroll&/span& &span class=&nx&&from&/span& &span class=&s1&&'better-scroll'&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&props&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 1 滚动的时候会派发scroll事件，会截流。&/span&
&span class=&cm&&
* 2 滚动的时候实时派发scroll事件，不会截流。&/span&
&span class=&cm&&
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件&/span&
&span class=&cm&&
&span class=&nx&&probeType&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nb&&Number&/span&&span class=&p&&,&/span&
&span class=&k&&default&/span&&span class=&o&&:&/span& &span class=&mi&&1&/span&
&span class=&p&&},&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 点击列表是否派发click事件&/span&
&span class=&cm&&
&span class=&nx&&click&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nb&&Boolean&/span&&span class=&p&&,&/span&
&span class=&k&&default&/span&&span class=&o&&:&/span& &span class=&kc&&true&/span&
&span class=&p&&},&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 是否开启横向滚动&/span&
&span class=&cm&&
&span class=&nx&&scrollX&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nb&&Boolean&/span&&span class=&p&&,&/span&
&span class=&k&&default&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&
&span class=&p&&},&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 是否派发滚动事件&/span&
&span class=&cm&&
&span class=&nx&&listenScroll&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nb&&Boolean&/span&&span class=&p&&,&/span&
&span class=&k&&default&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&
&span class=&p&&},&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 列表的数据&/span&
&span class=&cm&&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nb&&Array&/span&&span class=&p&&,&/span&
&span class=&k&&default&/span&&span class=&o&&:&/span& &span class=&kc&&null&/span&
&span class=&p&&},&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 是否派发滚动到底部的事件，用于上拉加载&/span&
&span class=&cm&&
&span class=&nx&&pullup&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nb&&Boolean&/span&&span class=&p&&,&/span&
&span class=&k&&default&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&
&span class=&p&&},&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 是否派发顶部下拉的事件，用于下拉刷新&/span&
&span class=&cm&&
&span class=&nx&&pulldown&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nb&&Boolean&/span&&span class=&p&&,&/span&
&span class=&k&&default&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&
&span class=&p&&},&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 是否派发列表滚动开始的事件&/span&
&span class=&cm&&
&span class=&nx&&beforeScroll&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nb&&Boolean&/span&&span class=&p&&,&/span&
&span class=&k&&default&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&
&span class=&p&&},&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 当数据更新后，刷新scroll的延时。&/span&
&span class=&cm&&
&span class=&nx&&refreshDelay&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nb&&Number&/span&&span class=&p&&,&/span&
&span class=&k&&default&/span&&span class=&o&&:&/span& &span class=&mi&&20&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&mounted&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 保证在DOM渲染完毕后初始化better-scroll&/span&
&span class=&nx&&setTimeout&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&_initScroll&/span&&span class=&p&&()&/span&
&span class=&p&&},&/span& &span class=&mi&&20&/span&&span class=&p&&)&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&_initScroll&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&o&&!&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$refs&/span&&span class=&p&&.&/span&&span class=&nx&&wrapper&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span&
&span class=&p&&}&/span&
&span class=&c1&&// better-scroll的初始化&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&BScroll&/span&&span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$refs&/span&&span class=&p&&.&/span&&span class=&nx&&wrapper&/span&&span class=&p&&,&/span& &span class=&p&&{&/span&
&span class=&nx&&probeType&/span&&span class=&o&&:&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&probeType&/span&&span class=&p&&,&/span&
&span class=&nx&&click&/span&&span class=&o&&:&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&click&/span&&span class=&p&&,&/span&
&span class=&nx&&scrollX&/span&&span class=&o&&:&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scrollX&/span&
&span class=&p&&})&/span&
&span class=&c1&&// 是否派发滚动事件&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&listenScroll&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&on&/span&&span class=&p&&(&/span&&span class=&s1&&'scroll'&/span&&span class=&p&&,&/span& &span class=&p&&(&/span&&span class=&nx&&pos&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$emit&/span&&span class=&p&&(&/span&&span class=&s1&&'scroll'&/span&&span class=&p&&,&/span& &span class=&nx&&pos&/span&&span class=&p&&)&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&c1&&// 是否派发滚动到底部事件，用于上拉加载&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&pullup&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&on&/span&&span class=&p&&(&/span&&span class=&s1&&'scrollEnd'&/span&&span class=&p&&,&/span& &span class=&p&&()&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&c1&&// 滚动到底部&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&y&/span& &span class=&o&&&=&/span& &span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&maxScrollY&/span& &span class=&o&&+&/span& &span class=&mi&&50&/span&&span class=&p&&))&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$emit&/span&&span class=&p&&(&/span&&span class=&s1&&'scrollToEnd'&/span&&span class=&p&&)&/span&
&span class=&p&&}&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&c1&&// 是否派发顶部下拉事件，用于下拉刷新&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&pulldown&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&on&/span&&span class=&p&&(&/span&&span class=&s1&&'touchend'&/span&&span class=&p&&,&/span& &span class=&p&&(&/span&&span class=&nx&&pos&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&c1&&// 下拉动作&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&nx&&pos&/span&&span class=&p&&.&/span&&span class=&nx&&y&/span& &span class=&o&&&&/span& &span class=&mi&&50&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$emit&/span&&span class=&p&&(&/span&&span class=&s1&&'pulldown'&/span&&span class=&p&&)&/span&
&span class=&p&&}&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&c1&&// 是否派发列表滚动开始的事件&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&beforeScroll&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&on&/span&&span class=&p&&(&/span&&span class=&s1&&'beforeScrollStart'&/span&&span class=&p&&,&/span& &span class=&p&&()&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$emit&/span&&span class=&p&&(&/span&&span class=&s1&&'beforeScroll'&/span&&span class=&p&&)&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&disable&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 代理better-scroll的disable方法&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span& &span class=&o&&&&&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&disable&/span&&span class=&p&&()&/span&
&span class=&p&&},&/span&
&span class=&nx&&enable&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 代理better-scroll的enable方法&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span& &span class=&o&&&&&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&enable&/span&&span class=&p&&()&/span&
&span class=&p&&},&/span&
&span class=&nx&&refresh&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 代理better-scroll的refresh方法&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span& &span class=&o&&&&&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&refresh&/span&&span class=&p&&()&/span&
&span class=&p&&},&/span&
&span class=&nx&&scrollTo&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 代理better-scroll的scrollTo方法&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span& &span class=&o&&&&&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&scrollTo&/span&&span class=&p&&.&/span&&span class=&nx&&apply&/span&&span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&,&/span& &span class=&nx&&arguments&/span&&span class=&p&&)&/span&
&span class=&p&&},&/span&
&span class=&nx&&scrollToElement&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 代理better-scroll的scrollToElement方法&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span& &span class=&o&&&&&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&.&/span&&span class=&nx&&scrollToElement&/span&&span class=&p&&.&/span&&span class=&nx&&apply&/span&&span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&scroll&/span&&span class=&p&&,&/span& &span class=&nx&&arguments&/span&&span class=&p&&)&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&watch&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&c1&&// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&nx&&setTimeout&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&refresh&/span&&span class=&p&&()&/span&
&span class=&p&&},&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&refreshDelay&/span&&span class=&p&&)&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&JS 部分实际上就是对 better-scroll 做一层 Vue 的封装，通过 props 的形式，把一些对 better-scroll 定制化的控制权交给父组件；通过 methods 暴露的一些方法对 better-scroll 的方法做一层代理；通过 watch 传入的 data，当 data 发生改变的时候，在适当的时机调用 refresh 方法重新计算 better-scroll 确保滚动效果正常，这里之所以要有一个 refreshDelay 的设置是考虑到如果我们对列表操作用到了 transition-group 做动画效果，那么 DOM 的渲染完毕时间就是在动画完成之后。&/p&&p&有了这一层 scroll 组件的封装，我们来修改刚刚最复杂的代码（假设我们已经全局注册了 scroll 组件）。&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&template&/span&&span class=&o&&&&/span&
&span class=&o&&&&/span&&span class=&nx&&scroll&/span& &span class=&kr&&class&/span&&span class=&o&&=&/span&&span class=&s2&&&wrapper&&/span&
&span class=&o&&:&/span&&span class=&nx&&data&/span&&span class=&o&&=&/span&&span class=&s2&&&data&&/span&
&span class=&o&&:&/span&&span class=&nx&&pulldown&/span&&span class=&o&&=&/span&&span class=&s2&&&pulldown&&/span&
&span class=&err&&@&/span&&span class=&nx&&pulldown&/span&&span class=&o&&=&/span&&span class=&s2&&&loadData&&/span&&span class=&o&&&&/span&
&span class=&o&&&&/span&&span class=&nx&&ul&/span& &span class=&kr&&class&/span&&span class=&o&&=&/span&&span class=&s2&&&content&&/span&&span class=&o&&&&/span&
&span class=&o&&&&/span&&span class=&nx&&li&/span& &span class=&nx&&v&/span&&span class=&o&&-&/span&&span class=&k&&for&/span&&span class=&o&&=&/span&&span class=&s2&&&item in data&&/span&&span class=&o&&&&/span&&span class=&p&&{{&/span&&span class=&nx&&item&/span&&span class=&p&&}}&/span&&span class=&o&&&&/span&&span class=&err&&/li&&/span&
&span class=&o&&&&/span&&span class=&err&&/ul&&/span&
&span class=&o&&&&/span&&span class=&nx&&div&/span& &span class=&kr&&class&/span&&span class=&o&&=&/span&&span class=&s2&&&loading-wrapper&&/span&&span class=&o&&&&&/span&&span class=&err&&/div&&/span&
&span class=&o&&&&/span&&span class=&err&&/scroll&&/span&
&span class=&o&&&&/span&&span class=&err&&/template&&/span&
&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&import&/span& &span class=&nx&&BScroll&/span& &span class=&nx&&from&/span& &span class=&s1&&'better-scroll'&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&p&&[],&/span&
&span class=&nx&&pulldown&/span&&span class=&o&&:&/span& &span class=&kc&&true&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&created&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&loadData&/span&&span class=&p&&()&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&loadData&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&nx&&requestData&/span&&span class=&p&&().&/span&&span class=&nx&&then&/span&&span class=&p&&((&/span&&span class=&nx&&res&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&data&/span& &span class=&o&&=&/span& &span class=&nx&&res&/span&&span class=&p&&.&/span&&span class=&nx&&data&/span&&span class=&p&&.&/span&&span class=&nx&&concat&/span&&span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&data&/span&&span class=&p&&)&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&可以很明显的看到我们的 JS 部分精简了非常多的代码，没有对 better-scroll 再做命令式的操作了，同时把数据请求和 better-scroll 也做了剥离，父组件只需要把数据 data 通过 prop 传给 scroll 组件，就可以保证 scroll 组件的滚动效果。同时，如果想实现下拉刷新的功能，只需要通过 prop 把 pulldown 设置为 true，并且监听 pulldown 的事件去做一些数据获取并更新的动作即可，整个逻辑也是非常清晰的。&/p&&h2&插件 Vue 化引发的一些思考&/h2&&p&这篇文章我不仅仅是要教会大家封装一个 scroll 组件，还想传递一些把第三方插件（原生 JS 实现）Vue 化的思考过程。很多学习 Vue.js 的同学可能还停留在 “XX 效果如何用 Vue.js 实现” 的程度，其实把插件 Vue 化有两点很关键，一个是对插件本身的实现原理很了解，另一个是对 Vue.js 的特性很了解。对插件本身的实现原理了解需要的是一个思考和钻研的过程，这个过程可能困难，但是收获也是巨大的；而对 Vue.js 的特性的了解，是需要大家对 Vue.js 多多使用，学会从平时的项目中积累和总结，也要善于查阅 Vue.js 的官方文档，关注一些 Vue.js 的升级等。&/p&&p&所以，我们拒绝伸手党，但也不是鼓励大家什么时候都要去造轮子，当我们在使用一些现成插件的同时，也希望大家能多多思考，去探索一下现象背后的本质，把 “XX 效果如何用 Vue.js 实现” 这句话从问号变成句号。&/p&&h2&广告时间&/h2&&p&最近上线了一门 &a href=&/?target=http%3A///class/107.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vue.js 的高级课程&i class=&icon-external&&&/i&&/a&，想在 Vue.js 和移动端开发方向进阶的同学可以关注一波~&/p&
在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了。 以滴滴为例，可以是这样竖向滚动的列表，如图所示：也可以是横向滚动的导航栏，如图所示：可以打开“微信 —& 钱包—&滴滴出行”体验效果。我们在实现这类滚动功能的时候，会用到我写的…
&img src=&/50/v2-ae375e3dd38e5fd9e3dcbd_b.jpg& data-rawwidth=&1080& data-rawheight=&608& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&/50/v2-ae375e3dd38e5fd9e3dcbd_r.jpg&&&p&最近做了一个&a href=&/?target=https%3A///opendigg/awesome-github-vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vue开源项目库汇总&i class=&icon-external&&&/i&&/a&，里面集合了&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&OpenDigg&i class=&icon-external&&&/i&&/a& 上的优质的&a href=&/?target=http%3A///tags/front-vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vue开源项目库&i class=&icon-external&&&/i&&/a&，方便移动开发人员便捷的找到自己需要的项目工具等，感兴趣的可以到GitHub上给个star。&/p&&blockquote&作者：&a href=&/?target=http%3A///u/4a62c2dce089& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&OpenDigg&i class=&icon-external&&&/i&&/a&授权转发&br&&a href=&/?target=http%3A///u/96fd8d367d14& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&/u/4a62c2dce089&i class=&icon-external&&&/i&&/a&&/blockquote&&h3&UI组件&/h3&&ul&&li&&a href=&/?target=https%3A///ElemeFE/element& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&element&i class=&icon-external&&&/i&&/a& ★9305 - 饿了么出品的Vue2的web UI工具套件&/li&&li&&a href=&/?target=https%3A///airyland/vux& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vux&i class=&icon-external&&&/i&&/a& ★6802 - 基于Vue和WeUI的组件库&/li&&li&&a href=&/?target=https%3A///ElemeFE/mint-ui& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mint-ui&i class=&icon-external&&&/i&&/a& ★4776 - Vue 2的移动UI元素&/li&&li&&a href=&/?target=https%3A///iview/iview& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&iview&i class=&icon-external&&&/i&&/a& ★4458 - 基于 Vuejs 的开源 UI 组件库&/li&&li&&a href=&/?target=https%3A///JosephusPaye/Keen-UI& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Keen-UI&i class=&icon-external&&&/i&&/a& ★2363 - 轻量级的基本UI组件合集&/li&&li&&a href=&/?target=https%3A///marcosmoura/vue-material& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-material&i class=&icon-external&&&/i&&/a& ★2207 - 通过Vue Material和Vue 2建立精美的app应用&/li&&li&&a href=&/?target=https%3A///museui/muse-ui& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&muse-ui&i class=&icon-external&&&/i&&/a& ★1992 - 三端样式一致的响应式 UI 库&/li&&li&&a href=&/?target=https%3A///vuetifyjs/vuetify& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vuetify&i class=&icon-external&&&/i&&/a& ★1678 - 为移动而生的Vue JS 2组件框架&/li&&li&&a href=&/?target=https%3A///wangdahoo/vonic& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vonic&i class=&icon-external&&&/i&&/a& ★1494 - 快速构建移动端单页应用&/li&&li&&a href=&/?target=https%3A///egoist/eme& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&eme&i class=&icon-external&&&/i&&/a& ★1390 - 优雅的Markdown编辑器&/li&&li&&a href=&/?target=https%3A///monterail/vue-multiselect& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-multiselect&i class=&icon-external&&&/i&&/a& ★1166 - Vue.js选择框解决方案&/li&&li&&a href=&/?target=https%3A///ratiw/vue-table& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-table&i class=&icon-external&&&/i&&/a& ★824 - 简化数据表格&/li&&li&&a href=&/?target=https%3A///OYsun/VueCircleMenu& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&VueCircleMenu&i class=&icon-external&&&/i&&/a& ★776 - 漂亮的vue圆环菜单&/li&&li&&a href=&/?target=https%3A///Coffcer/vue-chat& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-chat&i class=&icon-external&&&/i&&/a& ★748 - vuejs和vuex及webpack的聊天示例&/li&&li&&a href=&/?target=https%3A///luojilab/radon-ui& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&radon-ui&i class=&icon-external&&&/i&&/a& ★633 - 快速开发产品的Vue组件库&/li&&li&&a href=&/?target=https%3A///MopTym/vue-waterfall& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-waterfall&i class=&icon-external&&&/i&&/a& ★605 - Vue.js的瀑布布局组件&/li&&li&&a href=&/?target=https%3A///myronliu347/vue-carbon& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-carbon&i class=&icon-external&&&/i&&/a& ★595 - 基于 vue 开发MD风格的移动端&/li&&li&&a href=&/?target=https%3A///FE-Driver/vue-beauty& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-beauty&i class=&icon-external&&&/i&&/a& ★569 - 由vue和ant design创建的优美UI组件&/li&&li&&a href=&/?target=https%3A///chenz24/vue-blu& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-blu&i class=&icon-external&&&/i&&/a& ★557 - 帮助你轻松创建web应用&/li&&li&&a href=&/?target=https%3A///taylorchen709/vueAdmin& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vueAdmin&i class=&icon-external&&&/i&&/a& ★556 - 基于vuejs2和element的简单的管理员模板&/li&&li&&a href=&/?target=https%3A///vuejs/vue-syntax-highlight& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-syntax-highlight&i class=&icon-external&&&/i&&/a& ★551 - Sublime Text语法高亮&/li&&li&&a href=&/?target=https%3A///ElemeFE/vue-infinite-scroll& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-infinite-scroll&i class=&icon-external&&&/i&&/a& ★524 - VueJS的无限滚动指令&/li&&li&&a href=&/?target=https%3A///David-Desmaisons/Vue.Draggable& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vue.Draggable&i class=&icon-external&&&/i&&/a& ★493 - 实现拖放和视图模型数组同步&/li&&li&&a href=&/?target=https%3A///surmon-china/vue-awesome-swiper& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-awesome-swiper&i class=&icon-external&&&/i&&/a& ★476 - vue.js触摸滑动组件&/li&&li&&a href=&/?target=https%3A///jinzhe/vue-calendar& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-calendar&i class=&icon-external&&&/i&&/a& ★465 - 日期选择插件&/li&&li&&a href=&/?target=https%3A///pi0/bootstrap-vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&bootstrap-vue&i class=&icon-external&&&/i&&/a& ★458 - 应用于Vuejs2的Twitter的Bootstrap 4组件&/li&&li&&a href=&/?target=https%3A///ElemeFE/vue-swipe& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-swipe&i class=&icon-external&&&/i&&/a& ★361 - VueJS触摸滑块&/li&&li&&a href=&/?target=https%3A///ElemeFE/vue-amap& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-amap&i class=&icon-external&&&/i&&/a& ★346 - 基于Vue 2和高德地图的地图组件&/li&&li&&a href=&/?target=https%3A///apertureless/vue-chartjs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-chartjs&i class=&icon-external&&&/i&&/a& ★333 - vue中的Chartjs的封装&/li&&li&&a href=&/?target=https%3A///hilongjw/vue-datepicker& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-datepicker&i class=&icon-external&&&/i&&/a& ★331 - 日历和日期选择组件&/li&&li&&a href=&/?target=https%3A///jrainlau/markcook& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&markcook&i class=&icon-external&&&/i&&/a& ★318 - 好看的markdown编辑器&/li&&li&&a href=&/?target=https%3A///GuillaumeLeclerc/vue-google-maps& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-google-maps&i class=&icon-external&&&/i&&/a& ★287 - 带有双向数据绑定Google地图组件&/li&&li&&a href=&/?target=https%3A///hilongjw/vue-progressbar& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-progressbar&i class=&icon-external&&&/i&&/a& ★248 - vue轻量级进度条&/li&&li&&a href=&/?target=https%3A///alessiomaffeis/vue-picture-input& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-picture-input&i class=&icon-external&&&/i&&/a& ★236 - 移动友好的图片文件输入组件&/li&&li&&a href=&/?target=https%3A///PeachScript/vue-infinite-loading& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-infinite-loading&i class=&icon-external&&&/i&&/a& ★224 - VueJS的无限滚动插件&/li&&li&&a href=&/?target=https%3A///lian-yue/vue-upload-component& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-upload-component&i class=&icon-external&&&/i&&/a& ★204 - Vuejs文件上传组件&/li&&li&&a href=&/?target=https%3A///Haixing-Hu/vue-datetime-picker& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-datetime-picker&i class=&icon-external&&&/i&&/a& ★197 - 日期时间选择控件&/li&&li&&a href=&/?target=https%3A///wangdahoo/vue-scroller& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-scroller&i class=&icon-external&&&/i&&/a& ★196 - Vonic UI的功能性组件&/li&&li&&a href=&/?target=https%3A///icai/vue2-calendar& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue2-calendar&i class=&icon-external&&&/i&&/a& ★181 - 支持lunar和日期事件的日期选择器&/li&&li&&a href=&/?target=https%3A///surmon-china/vue-video-player& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-video-player&i class=&icon-external&&&/i&&/a& ★178 - VueJS视频及直播播放器&/li&&li&&a href=&/?target=https%3A///Wanderxx/vue-fullcalendar& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-fullcalendar&i class=&icon-external&&&/i&&/a& ★176 - 基于vue.js的全日历组件&/li&&li&&a href=&/?target=https%3A///ccforward/rubik& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&rubik&i class=&icon-external&&&/i&&/a& ★170 - 基于Vuejs2的开源 UI 组件库&/li&&li&&a href=&/?target=https%3A///OYsun/VueStar& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&VueStar&i class=&icon-external&&&/i&&/a& ★169 - 带星星动画的vue点赞按钮&/li&&li&&a href=&/?target=https%3A///egoist/vue-mugen-scroll& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-mugen-scroll&i class=&icon-external&&&/i&&/a& ★167 - 无限滚动组件&/li&&li&&a href=&/?target=https%3A///mint-ui/mint-loadmore& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mint-loadmore&i class=&icon-external&&&/i&&/a& ★167 - VueJS的双向下拉刷新组件&/li&&li&&a href=&/?target=https%3A///matfish2/vue-tables-2& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-tables-2&i class=&icon-external&&&/i&&/a& ★162 - 显示数据的bootstrap样式网格&/li&&li&&a href=&/?target=https%3A///Akryum/vue-virtual-scroller& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-virtual-scroller&i class=&icon-external&&&/i&&/a& ★158 - 带任意数目数据的顺畅的滚动&/li&&li&&a href=&/?target=https%3A///SimonZhangITer/DataVisualization& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&DataVisualization&i class=&icon-external&&&/i&&/a& ★149 - 数据可视化&/li&&li&&a href=&/?target=https%3A///surmon-china/vue-quill-editor& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-quill-editor&i class=&icon-external&&&/i&&/a& ★149 - 基于Quill适用于Vue2的富文本编辑器&/li&&li&&a href=&/?target=https%3A///hifarer/Vueditor& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vueditor&i class=&icon-external&&&/i&&/a& ★138 - 所见即所得的编辑器&/li&&li&&a href=&/?target=https%3A///PeakTai/vue-html5-editor& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-html5-editor&i class=&icon-external&&&/i&&/a& ★132 - html5所见即所得编辑器&/li&&li&&a href=&/?target=https%3A///ElemeFE/vue-msgbox& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-msgbox&i class=&icon-external&&&/i&&/a& ★127 - vuejs的消息框&/li&&li&&a href=&/?target=https%3A///warpcgd/vue-slider& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-slider&i class=&icon-external&&&/i&&/a& ★126 - vue 滑动组件&/li&&li&&a href=&/?target=https%3A///Vanthink-UED/vue-core-image-upload& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-core-image-upload&i class=&icon-external&&&/i&&/a& ★124 - 轻量级的vue上传插件&/li&&li&&a href=&/?target=https%3A///hilongjw/vue-slide& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-slide&i class=&icon-external&&&/i&&/a& ★121 - vue轻量级滑动组件&/li&&li&&a href=&/?target=https%3A///JALBAA/vue-lazyload-img& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-lazyload-img&i class=&icon-external&&&/i&&/a& ★118 - 移动优化的vue图片懒加载插件&/li&&li&&a href=&/?target=https%3A///Alex-fun/vue-drag-and-drop-list& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-drag-and-drop-list&i class=&icon-external&&&/i&&/a& ★114 - 创建排序列表的Vue指令&/li&&li&&a href=&/?target=https%3A///MatteoGabriele/vue-progressive-image& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-progressive-image&i class=&icon-external&&&/i&&/a& ★107 - Vue的渐进图像加载插件&/li&&li&&a href=&/?target=https%3A///vuwe/vuwe& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vuwe&i class=&icon-external&&&/i&&/a& ★107 - 基于微信WeUI所开发的专用于Vue2的组件库&/li&&li&&a href=&/?target=https%3A///rowanwins/vue-dropzone& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-dropzone&i class=&icon-external&&&/i&&/a& ★105 - 用于文件上传的Vue组件&/li&&li&&a href=&/?target=https%3A///hchstera/vue-charts& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-charts&i class=&icon-external&&&/i&&/a& ★101 - 轻松渲染一个图表&/li&&li&&a href=&/?target=https%3A///weilao/vue-swiper& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-swiper&i class=&icon-external&&&/i&&/a& ★95 - 易于使用的滑块组件&/li&&li&&a href=&/?target=https%3A///littlewin-wang/vue-images& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-images&i class=&icon-external&&&/i&&/a& ★93 - 显示一组图片的lightbox组件&/li&&li&&a href=&/?target=https%3A///Wlada/vue-carousel-3d& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-carousel-3d&i class=&icon-external&&&/i&&/a& ★91 - VueJS的3D轮播组件&/li&&li&&a href=&/?target=https%3A///QingWei-Li/vue-region-picker& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-region-picker&i class=&icon-external&&&/i&&/a& ★89 - 选择中国的省份市和地区&/li&&li&&a href=&/?target=https%3A///cngu/vue-typer& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-typer&i class=&icon-external&&&/i&&/a& ★89 - 模拟用户输入选择和删除文本的Vue组件&/li&&li&&a href=&/?target=https%3A///NewDadaFE/vue-impression& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-impression&i class=&icon-external&&&/i&&/a& ★88 - 移动Vuejs2 UI元素&/li&&li&&a href=&/?target=https%3A///galenyuan/vue-datatable& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-datatable&i class=&icon-external&&&/i&&/a& ★87 - 使用Vuejs创建的DataTableView&/li&&li&&a href=&/?target=https%3A///santiblanko/vue-instant& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-instant&i class=&icon-external&&&/i&&/a& ★86 - 轻松创建自动提示的自定义搜索控件&/li&&li&&a href=&/?target=https%3A///hilongjw/vue-dragging& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-dragging&i class=&icon-external&&&/i&&/a& ★86 - 使元素可以拖拽&/li&&li&&a href=&/?target=https%3A///NightCatSama/vue-slider-component& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-slider-component&i class=&icon-external&&&/i&&/a& ★85 - 在vue1和vue2中使用滑块&/li&&li&&a href=&/?target=https%3A///BosNaufal/vue2-loading-bar& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue2-loading-bar&i class=&icon-external&&&/i&&/a& ★76 - 最简单的仿Youtube加载条视图&/li&&li&&a href=&/?target=https%3A///weifeiyue/vue-datepicker& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-datepicker&i class=&icon-external&&&/i&&/a& ★75 - 漂亮的Vue日期选择器组件&/li&&li&&a href=&/?target=https%3A///hilongjw/vue-video& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-video&i class=&icon-external&&&/i&&/a& ★70 - Vue.js的HTML5视频播放器&/li&&li&&a href=&/?target=https%3A///ElemeFE/vue-toast-mobile& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-toast-mobile&i class=&icon-external&&&/i&&/a& ★68 - VueJS的toast插件&/li&&li&&a href=&/?target=https%3A///dai-siki/vue-image-crop-upload& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-image-crop-upload&i class=&icon-external&&&/i&&/a& ★67 - vue图片剪裁上传组件&/li&&li&&a href=&/?target=https%3A///Akryum/vue-tooltip& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-tooltip&i class=&icon-external&&&/i&&/a& ★66 - 带绑定信息提示的提示工具&/li&&li&&a href=&/?target=https%3A///weizhenye/vue-highcharts& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-highcharts&i class=&icon-external&&&/i&&/a& ★66 - HighCharts组件&/li&&li&&a href=&/?target=https%3A///surmon-china/vue-touch-ripple& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-touch-ripple&i class=&icon-external&&&/i&&/a& ★62 - vuejs的触摸ripple组件&/li&&li&&a href=&/?target=https%3A///Kocisov/coffeebreak& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&coffeebreak&i class=&icon-external&&&/i&&/a& ★61 - 实时编辑CSS组件工具&/li&&li&&a href=&/?target=https%3A///coderdiaz/vue-datasource& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-datasource&i class=&icon-external&&&/i&&/a& ★60 - 创建VueJS动态表格&/li&&li&&a href=&/?target=https%3A///phoenixwong/vue2-timepicker& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue2-timepicker&i class=&icon-external&&&/i&&/a& ★60 - 下拉时间选择器&/li&&li&&a href=&/?target=https%3A///Bubblings/vue-date-picker& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-date-picker&i class=&icon-external&&&/i&&/a& ★59 - VueJS日期选择器组件&/li&&li&&a href=&/?target=https%3A///BosNaufal/vue-scrollbar& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-scrollbar&i class=&icon-external&&&/i&&/a& ★58 - 最简单的滚动区域组件&/li&&li&&a href=&/?target=https%3A///CroudSupport/vue-quill& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-quill&i class=&icon-external&&&/i&&/a& ★56 - vue组件构建quill编辑器&/li&&li&&a href=&/?target=https%3A///phanan/vue-google-signin-button& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-google-signin-button&i class=&icon-external&&&/i&&/a& ★55 - 导入谷歌登录按钮&/li&&li&&a href=&/?target=https%3A///MMF-FE/vue-svgicon& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-svgicon&i class=&icon-external&&&/i&&/a& ★53 - 创建svg图标组件的工具&/li&&li&&a href=&/?target=https%3A///bkzl/vue-float-label& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-float-label&i class=&icon-external&&&/i&&/a& ★49 - VueJS浮动标签模式&/li&&li&&a href=&/?target=https%3A///Dafrok/vue-baidu-map& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-baidu-map&i class=&icon-external&&&/i&&/a& ★46 - 基于 Vue 2的百度地图组件库&/li&&li&&a href=&/?target=https%3A///nicolasbeauvais/vue-social-sharing& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-social-sharing&i class=&icon-external&&&/i&&/a& ★45 - 社交分享组件&/li&&li&&a href=&/?target=https%3A///davidroyer/vue2-editor& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue2-editor&i class=&icon-external&&&/i&&/a& ★44 - HTML编辑器&/li&&li&&a href=&/?target=https%3A///Ginhing/vue-tagsinput& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-tagsinput&i class=&icon-external&&&/i&&/a& ★41 - 基于VueJS的标签组件&/li&&li&&a href=&/?target=https%3A///shhdgit/vue-easy-slider& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-easy-slider&i class=&icon-external&&&/i&&/a& ★41 - Vue 2.x的滑块组件&/li&&li&&a href=&/?target=https%3A///vue-bulma/datepicker& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&datepicker&i class=&icon-external&&&/i&&/a& ★38 - 基于flatpickr的时间选择组件&/li&&li&&a href=&/?target=https%3A///miaolz123/vue-chart& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-chart&i class=&icon-external&&&/i&&/a& ★37 - 强大的高速的vue图表解析&/li&&li&&a href=&/?target=https%3A///yunyi1895/vue-music-master& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-music-master&i class=&icon-external&&&/i&&/a& ★37 - vue手机端网页音乐播放器&/li&&li&&a href=&/?target=https%3A///vue-bulma/handsontable& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&handsontable&i class=&icon-external&&&/i&&/a& ★35 - 网页表格组件&/li&&li&&a href=&/?target=https%3A///F-loat/vue-simplemde& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-simplemde&i class=&icon-external&&&/i&&/a& ★35 - VueJS的Markdown编辑器组件&/li&&li&&a href=&/?target=https%3A///myronliu347/vue-popup-mixin& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-popup-mixin&i class=&icon-external&&&/i&&/a& ★35 - 用于管理弹出框的遮盖层&/li&&li&&a href=&/?target=https%3A///fangyongbao/cubeex& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&cubeex&i class=&icon-external&&&/i&&/a& ★33 - 包含一套完整的移动UI&/li&&li&&a href=&/?target=https%3A///CroudSupport/vue-fullcalendar& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-fullcalendar&i class=&icon-external&&&/i&&/a& ★32 - vue FullCalendar封装&/li&&li&&a href=&/?target=https%3A///loujiayu/vue-material-design& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-material-design&i class=&icon-external&&&/i&&/a& ★32 - Vue MD风格组件&/li&&li&&a href=&/?target=https%3A///bbonnin/vue-morris& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-morris&i class=&icon-external&&&/i&&/a& ★31 - Vuejs组件封装Morrisjs库&/li&&li&&a href=&/?target=https%3A///tianyong90/we-vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&we-vue&i class=&icon-external&&&/i&&/a& ★30 - Vue2及weui1开发的组件&/li&&li&&a href=&/?target=https%3A///legeneek/vue-image-clip& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-image-clip&i class=&icon-external&&&/i&&/a& ★29 - 基于vue的图像剪辑组件&/li&&li&&a href=&/?target=https%3A///jbaysolutions/vue-bootstrap-table& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-bootstrap-table&i class=&icon-external&&&/i&&/a& ★29 - 可排序可检索的表格&/li&&li&&a href=&/?target=https%3A///wyzant-dev/vue-radial-progress& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-radial-progress&i class=&icon-external&&&/i&&/a& ★28 - Vue.js放射性进度条组件&/li&&li&&a href=&/?target=https%3A///staskjs/vue-slick& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-slick&i class=&icon-external&&&/i&&/a& ★28 - 实现流畅轮播框的vue组件&/li&&li&&a href=&/?target=https%3A///bajian/vue-pull-to-refresh& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-pull-to-refresh&i class=&icon-external&&&/i&&/a& ★27 - Vue2的上拉下拉&/li&&li&&a href=&/?target=https%3A///matfish2/vue-form-2& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-form-2&i class=&icon-external&&&/i&&/a& ★26 - 全面的HTML表单管理的解决方案&/li&&li&&a href=&/?target=https%3A///vue-comps/vue-side-nav& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-side-nav&i class=&icon-external&&&/i&&/a& ★26 - 响应式的侧边导航&/li&&li&&a href=&/?target=https%3A///mint-ui/mint-indicator& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mint-indicator&i class=&icon-external&&&/i&&/a& ★26 - VueJS移动加载指示器插件&/li&&li&&a href=&/?target=https%3A///vue-bulma/chartjs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&chartjs&i class=&icon-external&&&/i&&/a& ★24 - Vue Bulma的chartjs组件&/li&&li&&a href=&/?target=https%3A///suguangwen/vue-scroll& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-scroll&i class=&icon-external&&&/i&&/a& ★24 - vue滚动&/li&&li&&a href=&/?target=https%3A///BosNaufal/vue-ripple& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-ripple&i class=&icon-external&&&/i&&/a& ★24 - 制作谷歌MD风格涟漪效果的Vue组件&/li&&li&&a href=&/?target=https%3A///icebob/vue-touch-keyboard& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-touch-keyboard&i class=&icon-external&&&/i&&/a& ★22 - VueJS虚拟键盘组件&/li&&li&&a href=&/?target=https%3A///ankane/vue-chartkick& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-chartkick&i class=&icon-external&&&/i&&/a& ★22 - VueJS一行代码实现优美图表&/li&&li&&a href=&/?target=https%3A///lisiyizu/vue-ztree& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-ztree&i class=&icon-external&&&/i&&/a& ★21 - 用 vue 写的树层级组件&/li&&li&&a href=&/?target=https%3A///shiye515/vue-m-carousel& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-m-carousel&i class=&icon-external&&&/i&&/a& ★20 - vue 移动端轮播组件&/li&&li&&a href=&/?target=https%3A///dai-siki/vue-datepicker-simple& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-datepicker-simple&i class=&icon-external&&&/i&&/a& ★20 - 基于vue的日期选择器&/li&&li&&a href=&/?target=https%3A///alexqdjay/vue-tabs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-tabs&i class=&icon-external&&&/i&&/a& ★20 - 多tab页轻型框架&/li&&li&&a href=&/?target=https%3A///aweiu/vue-verify-pop& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-verify-pop&i class=&icon-external&&&/i&&/a& ★19 - 带气泡提示的vue校验插件&/li&&li&&a href=&/?target=https%3A///vue-comps/vue-parallax& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-parallax&i class=&icon-external&&&/i&&/a& ★15 - 整洁的视觉效果&/li&&li&&a href=&/?target=https%3A///JackGit/vue-img-loader& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-img-loader&i class=&icon-external&&&/i&&/a& ★14 - 图片加载UI组件&/li&&li&&a href=&/?target=https%3A///eduardostuart/vue-typewriter& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-typewriter&i class=&icon-external&&&/i&&/a& ★13 - vue组件类型&/li&&li&&a href=&/?target=https%3A///Teddy-Zhu/vue-smoothscroll& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-smoothscroll&i class=&icon-external&&&/i&&/a& ★12 - smoothscroll的VueJS版本&/li&&li&&a href=&/?target=https%3A///xinxingyu/vue-city& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-city&i class=&icon-external&&&/i&&/a& ★10 - 城市选择器&/li&&li&&a href=&/?target=https%3A///weibangtuo/vue-tree& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-tree&i class=&icon-external&&&/i&&/a& ★10 - vue树视图组件&/li&&li&&a href=&/?target=https%3A///Treri/vue-ios-alertview& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-ios-alertview&i class=&icon-external&&&/i&&/a& ★8 - iOS7+ 风格的alertview服务&/li&&li&&a href=&/?target=https%3A///ibufu/dd-vue-component& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&dd-vue-component&i class=&icon-external&&&/i&&/a& ★7 - 订单来了的公共组件库&/li&&li&&a href=&/?target=https%3A///yeseason/paco-ui-vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&paco-ui-vue&i class=&icon-external&&&/i&&/a& ★7 - PACOUI的vue组件&/li&&li&&a href=&/?target=https%3A///doodlewind/vue-cmap& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-cmap&i class=&icon-external&&&/i&&/a& ★5 - Vue China map可视化组件&/li&&li&&a href=&/?target=https%3A///steven5538/vue-button& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-button&i class=&icon-external&&&/i&&/a& ★4 - Vue按钮组件&/li&&/ul&&h3&开发框架&/h3&&ul&&li&&a href=&/?target=https%3A///vuejs/vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue.js&i class=&icon-external&&&/i&&/a& ★45466 - 流行的轻量高效的前端组件化方案&/li&&li&&a href=&/?target=https%3A///fundon/vue-admin& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-admin&i class=&icon-external&&&/i&&/a& ★3222 - Vue管理面板框架&/li&&li&&a href=&/?target=https%3A///SimulatedGREG/electron-vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&electron-vue&i class=&icon-external&&&/i&&/a& ★1273 - Electron及VueJS快速启动样板&/li&&li&&a href=&/?target=https%3A///petervmeijgaard/vue-2.0-boilerplate& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-2.0-boilerplate&i class=&icon-external&&&/i&&/a& ★241 - Vue2单页应用样板&/li&&li&&a href=&/?target=https%3A///hanan198501/vue-spa-template& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-spa-template&i class=&icon-external&&&/i&&/a& ★223 - 前后端分离后的单页应用开发&/li&&li&&a href=&/?target=https%3A///nolimits4web/Framework7-Vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Framework7-Vue&i class=&icon-external&&&/i&&/a& ★210 - VueJS与Framework7结合&/li&&li&&a href=&/?target=https%3A///wangxg2016/vue-bulma& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-bulma&i class=&icon-external&&&/i&&/a& ★132 - 轻量级高性能MVVM Admin UI框架&/li&&li&&a href=&/?target=https%3A///rodzzlessa24/vue-webgulp& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-webgulp&i class=&icon-external&&&/i&&/a& ★100 - 仿VueJS Vue loader示例&/li&&li&&a href=&/?target=https%3A///Metnew/vue-element-starter& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-element-starter&i class=&icon-external&&&/i&&/a& ★34 - vue启动页&/li&&/ul&&h3&实用库&/h3&&ul&&li&&a href=&/?target=https%3A///vuejs/vuex& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vuex&i class=&icon-external&&&/i&&/a& ★5997 - 专为 Vue.js 应用程序开发的状态管理模式&/li&&li&&a href=&/?target=https%3A///monterail/vuelidate& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vuelidate&i class=&icon-external&&&/i&&/a& ★750 - 简单轻量级的基于模块的Vue.js验证&/li&&li&&a href=&/?target=https%3A///zerqu/qingcheng& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&qingcheng&i class=&icon-external&&&/i&&/a& ★677 - qingcheng主题&/li&&li&&a href=&/?target=https%3A///ElemeFE/vue-desktop& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-desktop&i class=&icon-external&&&/i&&/a& ★461 - 创建管理面板网站的UI库&/li&&li&&a href=&/?target=https%3A///declandewet/vue-meta& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-meta&i class=&icon-external&&&/i&&/a& ★257 - 管理app的meta信息&/li&&li&&a href=&/?target=https%3A///imcvampire/vue-axios& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-axios&i class=&icon-external&&&/i&&/a& ★209 - 将axios整合到VueJS的封装&/li&&li&&a href=&/?target=https%3A///cenkai88/vue-svg-icon& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-svg-icon&i class=&icon-external&&&/i&&/a& ★116 - vue2的可变彩色svg图标方案&/li&&li&&a href=&/?target=https%3A///eddyerburgh/avoriaz& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&avoriaz&i class=&icon-external&&&/i&&/a& ★110 - VueJS测试实用工具库&/li&&li&&a href=&/?target=https%3A///lmk123/vue-framework7& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-framework7&i class=&icon-external&&&/i&&/a& ★83 - 结合VueJS使用的Framework7组件&/li&&li&&a href=&/?target=https%3A///Coffcer/vue-bootstrap-modal& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-bootstrap-modal&i class=&icon-external&&&/i&&/a& ★78 - vue的Bootstrap样式组件&/li&&li&&a href=&/?target=https%3A///QingWei-Li/vuep& class=&