vue-scroll放在vue的项目中,实现下拉刷新的效果,但是发现,不能上拉的bug,上拉了之后,底部出现了一大段的空白,参照GitHub的问题,算是暂时解决了。

不能上拉的原因是:滑动标签里边的内容(内容区域)为绝对定位,改为相对定位就可以了。这样高度的百分之百才是全局的百分之百。

contentHeight应该去除pull-to-refresh-layer高度,否则某些情况下会导致底部多出一部分空白。暂时用flot:left解决。代码如下:

._v-container > ._v-content > .pull-to-refresh-layer {
width:100%;
height:120px;
margin-top:-120px;
text-align:center;
font-size:32px;
color:#AAA;
float:left;
top:0;
left:0;
}

  

vue-scroll 底部无数据时,底部出现大片的空白的更多相关文章

  1. 【vue】渲染大量数据时性能优化

    对应vue渲染大量数据时可以考虑下面几点: 1. 异步渲染组件:因为组件渲染太多,影响页面的渲染时间,所有可以延迟组件渲染,可以考虑v-if处理 2. 可以使用虚拟滚动的组件:参考使用这个插件 vue ...

  2. 当vue 页面加载数据时显示 加载loading

    参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画 创建组件 1.新建 .vue 文件: src -> c ...

  3. easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案

    在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var ...

  4. 扩展当easyui datagrid无数据时,显示特定值。如:没有数据

    var myview = $.extend({},$.fn.datagrid.defaults.view,{ onAfterRender:function(target){ $.fn.datagrid ...

  5. GridView 无数据时,绑定提示

    private void BindData() { DataTable dt = DAO.RunSQLReturnDt(this.getsql()); int dtcount = dt.Rows.Co ...

  6. 为什么你需要在用 Vue 渲染列表数据时指定 key

    本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...

  7. easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题

    在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...

  8. winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部 z

    http://www.zuowenjun.cn/post/2015/05/20/162.html 判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为Dat ...

  9. 实现winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部

    判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为DataGridView控件添加Scroll事件,然后写入以下代码就可以了,应用范围:可实现分部加载数据 ...

随机推荐

  1. final的作用

    前言 一直想写写这个话题.代表公司也面试过一些求职者,每次面试我必问的两个问题之一 就是“请你谈一谈对于final关键字的理解”.这是一个简单的小问题,但是不要小看它,通过对这个问题的回答以及一些简单 ...

  2. 撩课-Java每天5道面试题第20天

    131.Spring是什么? 他解决的是业务逻辑层和其他各层的松耦合问题, 因此它将面向接口的编程思想 贯穿整个系统应用. Spring是一个轻量级的IoC和AOP容器框架. 目的是解决企业应用开发的 ...

  3. 2019-1-19 object祖宗类的equals重写

    package com.test; /** * object祖宗类的equals重写 * @author Mr.kemi *2019-1-19 */ public class Equals { pri ...

  4. 51Nod 算法马拉松23 开黑记

    惨啊……虽然开了半天黑,但是还是被dalao们踩了…… 第二次开黑,还是被卡在rank20了,我好菜啊……= = 写一写比赛经过吧…… 看到题之后习惯性都打开,A~D看上去似乎并没有什么思路,F应该是 ...

  5. Linux VPS主机利用Crontab实现定时重启任务

    第一.安装Crontab可执行环境 一般的VPS/服务器是支持的,但是有些可能没有支持就需要我们来给予安装. A - centos系统 #安装Crontab yum install vixie-cro ...

  6. border-radius圆角兼容方案

    1.下载ie-css3.htc 2.CSS代码段 box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; ...

  7. bootstrap 中的 iCheck 全选反选功能的实现

    喜欢bootstrap 风格的同学应该知道,iCheck的样式还是很好看的. 官网: http://www.bootcss.com/p/icheck/ 进入正题,iCheck提供了一些方法,可以进行全 ...

  8. 实用爬虫-01-检测爬虫的 IP

    实用爬虫-01-检测爬虫的 IP 本篇介绍一个识别爬虫 ip 的小实例(教你一招识破无效的 ip 代理) [注意事项]: 1.url 可能会失效(个人感觉,因为它带了一个2018,下面附上链接获取方法 ...

  9. OmniGraffle教程(二)

    原文链接:简书网 创建一个树形结构图是任何一个作图软件最常用的功能之一了,而OmniGraffle画树形图的快速方便是其他软件无法比拟的,花1分钟即可学会,受益无穷. 方法一:用Diagram工具快速 ...

  10. 软工读书笔记 week 1

    这次读书笔记主要是就<程序员修炼之道>这本书的前半部分做一些总结以及发表一些自己的看法. 本书前面的一部分主要是一些程序员应该在工作中时刻注意的事情,一些关键的信息如下: 1.处理问题的态 ...