vue.js实现下拉刷新组件

vue-pullrefresh

Vue组件实现下拉刷新功能

Github地址

效果图

Demo地址

使用方式

git clone https://github.com/watson-yan...

组件的源码路径: ./src/components/pullRefresh.vue

说明

• 组件须要一个prop:next 类型为函数，表示刷新函数, 并且刷新函数须要为Promise语法糖，只有当next被resolve以后。提示信息才会消失
  组件代码片断:

this.next().then(() => {
              this.flag = 0
              this.loading = 0
              container.scrollTop = 0
              container.style.overflow = 'auto'
              container.style.transform = 'translate3D(0px, 0px, 0px)'
          })

• 信息提示栏的显示方式: 初版下拉刷新使用的是经过控制 信息提示栏高度 = 下拉的距离 来控制，可是显示效果在某些手机机型不流畅，因此这一版采用CSS3的transform来控制总体容器下移来显示信息提示栏。

设计思路

1. 假定咱们有一个容器Container(固定高度，并设置样式overflow-y:auto),容器中的内容为Content(内容高度超出容器的高度)。因为内容高度已经超过容器高度，那么容器Container就会出现滚动条。具体图示以下：

1. 当咱们在顶部下拉的时候，但愿能更新Content中的内容。即在Container的scrollTop为0的时候，咱们在触摸屏幕下拉能触发刷新规则。

2. 顶部信息的显示采起固定在Container的顶部，经过下拉的距离控制顶部信息的显示高度，从而达到下拉时显示提示信息的效果。