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. JSP简单实现统计网页访问次数

    JSP简单实现统计网页访问次数 需求:统计网页的访问次数 核心思想:利用application对象,将访问次数的信息放入application对象中,每次访问就+1.这里利用了application对 ...

  2. 使用NOPI读取Word、Excel文档内容

    使用NOPI读取Excel的例子很多,读取Word的例子不多. Excel的解析方式有多中,可以使用ODBC查询,把Excel作为一个数据集对待.也可以使用文档结构模型的方式进行解析,即解析Workb ...

  3. android中利用HttpURLConnection进行Get、Post和Session读取页面。

    直接上代码,调用的时候要放在线程中. package slj.getsms; import java.io.BufferedReader; import java.io.InputStreamRead ...

  4. [POI2007]EGZ-Driving Exam

    能到达所有路的充要条件是能到达左右两端的路 用vector反向建边对每条路左右分别求个最长不上升子序列 预处理出每条路向左向右分别需要多建多少路才能到达最左端和最右端 然后跑个\(\Theta(n)\ ...

  5. ThreeJs 选中物体事件

    选中物体变红色demo: https://threejs.org/examples/#webgl_raycast_sprite <!DOCTYPE html> <html lang= ...

  6. Google Map API V3调用arcgis发布的瓦片地图服务

    由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码 ...

  7. vue2 使用 element-ui

    看了  http://element.eleme.io/#/zh-CN/component/installation     一些组件和样式够用了 , 试了下 element-ui ,配合到vue中 ...

  8. Bootstrap 在线引用

    Bootstrap 3.3.0 js 文件 <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.j ...

  9. Java笔记-添加自定义公共类库

    大型项目,为了方便团队开发,需要建立公共类库,提高类库的重用性和维护性步骤如下: --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/387 ...

  10. Javascript 中 true 和 false

    "" == false // true "0" == false // true "" == "0" //false 以 ...