V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
watsony
V2EX  ›  Vue.js

使用 Vue 组件来实现下拉刷新容器

  •  
  •   watsony · 2017-06-14 18:05:43 +08:00 · 5125 次点击
    这是一个创建于 2479 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue-pullrefresh

    Vue 组件实现下拉刷新功能

    Github 地址

    效果图

    pullrefresh.gif

    Demo 地址

    qrcode.jpeg

    使用方式

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

    组件的源码路径: ./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 就会出现滚动条。具体图示如下:

    pic1.jpg

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

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

    pic2.jpg

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1132 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 18:45 · PVG 02:45 · LAX 11:45 · JFK 14:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.