使用better-scroll配合vue实现上拉加载下拉刷新组件

前提背景:大前端的时代造就了前端的业务逻辑越来越重，原有的MVP设计开发模式(jquery时代)造成了前端界面和数据操作都集中在MVP模式中的P层架构即控制器上，P层承担了大量的逻辑代码和操作视图DOM代码，两者交互在一起耦合性很强并且很重，而V(视图层)、M(数据层)的比重很轻，这对于业务功能越来越复杂的前端应用来说，大型的应用程序使用MVP模式已经不再是很好的选择。MVVM模式的诞生给我们构建复杂应用程序提供了极佳的管理模式和开发模式，VM层替代了原有的P层，它自动的处理dom和数据之间的关系，从而将我们把注意力集中在M层。随着MVVM越来越流行，遵循MVVM模式的Angular、React、Vue三大框架的应运而生，为我们开发大前端应用提供了极大的便利性。下面通过一小段代码对比MVP模式和MVVM之间的区别：

程序目标:实现简单的todolist效果:

MVP设计模式实现代码:

 
 
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 
 

 
 提交
 

MVP模式写的代码可以看出大量的逻辑代码和操作dom的代码交织在P控制层里，使用jquery开发遵循MVP模式的项目里，60%-70%的代码都和dom操作有关，造成了前端代码很重并且容易出错。

MVVM模式实现同样效果，使用vue框架实现:

 
 
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 
 

 
 提交
 

   
• {{item}}

 

MVVM模式包含视图层(V)、数据层(M)、VM(层)，不在包含控制器P层，而VM层是VUE框架内部实现的，我们不需要关心，通过上述实例可以看出我们进行的都是对数据的处理，数据发生改变，dom结构随之发生变化，VM层就是实现这一过程的机制。

再来引入一个思想：前端组件化思想，前端页面的每个可视区域都可以看做是一个个组件构成的，组件化的好处是当我们的前端界面功能复杂时，我们可以拆分成一个个组件，然后在每个组件里写相应的dom结构，js，css等，通过webpack等工程化工具使我们的组件组合成一个大界面，方便我们以后的维护和代码的复用，而我们所要做的上拉刷新下拉加载组件就是基于这一思想和vue的模式来实现的。

     先来认识一下better-scrol，该项目的github地址是，点击打开链接

插件作者是黄轶，引用作者的一篇文章当better-scroll遇见vue，里面详细解释了better-scroll的滚动原理和上拉加载，下拉刷新所需的API，

废话不多说，直接贴源码，亲测可以完美正常使用！

scroll.vue

refreshstyle(40px)函数是使用stylus编写的复用样式函数，代码如下：

// 上拉刷新下拉加载样式函数
refreshstyle($top)
 width: 100%
 height: $top
 z-index: 1
 line-height: $top
 text-align: center
 color: #777
 background: #f2f2f2
 .icon-jiazai
   display: inline-block
   width: 15px
   height: 15px
   margin-right: 10px
   vertical-align: middle
   background-size: 15px 15px
   background-repeat: no-repeat
   background-image: url("jiazai.gif")

如何使用scroll.vue组件实现上拉加载，下拉刷新

项目的实现效果如下：