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. 非法关闭idea后报错,插件无法正常加载解决方法

    Problems found loading plugins: Plugin "GlassFish Integration" was not loaded: required pl ...

  2. python中字符串格式化%与.format

    Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...

  3. Eclipse 分屏显示同一个代码文件

    描述: 今天在使用Eclipse开发的时候不知按错哪个键,出现编辑框分屏显示同一个代码,由于之前没有使用过这一功能,所以就去查了一下,原来是Eclipse的分屏功能. 快捷键: 方式一:Window ...

  4. Android 虚拟多开系列二——技术原理

    目录         Android虚拟多开应用有哪些?         Android虚拟多开应用技术原理有哪几类?         Android虚拟多开需求分析         反虚拟多开技术 ...

  5. 基于Vue的WebApp项目开发(四)

    实现新闻咨询页面 目录结构 步骤一:创建newslist.vue文件 <template> <div id="tml"> <!--使用mui框架,实现 ...

  6. Tomcat启动时卡在“INFO: Deploying web application directory ......”的解决方法

    https://blog.csdn.net/njchenyi/article/details/46641141

  7. Android实现身份证拍摄框

    http://blog.csdn.net/lhbtm/article/details/55505668 最近项目需要实现身份证拍照的功能,系统的相机并不能满足需求,故需要自定义相机,先上效果图,使用了 ...

  8. INFA Transformation组件

    RouterRouter和Filter很相似,Router可以用一或多个Filter来取代,不同的是用Router来生成多个组时输入数据只需处理一次,所以效率更高:Router 由一个输入组,一到多个 ...

  9. mongodb节点配置指南

    修改复制集节点的优先级 复制集节点的 priority 参数的值决定了选举中该节点的优先级.值越高,优先级越高. 我们可以通过修改复制集配置参数中 members 数组位置的优先级来修改对应机器的优先 ...

  10. time random sys 模块

    time模块 顾名思义就是时间模块 我们在之前就用过一些时间模块 比如你想要让打印的时间延迟就time.sleep() 首先我们知道这是一个时间操作的模块 它可以分为三种模式:时间戳模式.格式化时间模 ...