vue.js实现下拉刷新组件

Berwin 发布于2019-08-20 17:17 / 2906人阅读

摘要：组件实现下拉刷新功能地址效果图地址使用方式组件的源码路径说明组件需要一个类型为函数，表示刷新函数而且刷新函数需要为语法糖，只有当被之后。

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来控制整体容器下移来显示信息提示栏。

设计思路

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

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

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

混合云私有云下拉列表组件下拉刷新下拉刷新空白下拉刷新控件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83467.html

有赞vant-ui Tabs、List、PullRefresh组件实践

摘要：建议，每个栏目下放一个空列表组件，将空组件放在下拉刷新组件里面。下拉刷新请求两次。请求结束后必须把下拉刷新绑定的置为，要不然又会多请求一次魅族手机按键返回桌面，再重新回到后列表上下划不动。魅族的返回键问题，在换用列表插件后得到解决。 Vant ui + Vue.js 部分组件实践功能需求是实现一个移动端的栏目列表切换，于此同时列表需要进行下拉刷新，上拉加载如下图，大概是一个这样...

habren 2019-08-26 12:17 评论0 收藏0
基于Vue.js的音乐播放器（Webapp）

摘要：概述项目是基于，成品是一个移动端的音乐播放器，来源于的实战课程。播放器是全局组件，放在下面，通过传递数据，触发提交，从而使播放器开始工作。将请求的数据格式化后再通过传递，组件间共享，实现歌曲的播放切换等。概述项目是基于Vue.js，成品是一个移动端的音乐播放器，来源于imooc的实战课程。自己动手实践并加以修改拓展。项目的大致流程是Vue-cli构建开发环境，分析需求，设计构思，规...

widuu 2019-08-20 18:23 评论0 收藏0
2月份前端资源分享

摘要：月份前端资源分享更多资源请文章转自前端生成好看的二维码十大经典排序算法带动图演示为什么知乎前端圈普遍认为游戏和展示的个人整理和封装的库中文详细注释供新手学习使用扩展语法记录掉坑初期工具汉字拼音转换工具实现汉字转拼音的插件下拉列表支持拼音简 2月份前端资源分享更多资源请Star：https://github.com/maidishike... 文章转自：https://github...

yanwei 2019-08-20 14:25 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0