备注:better-scroll 实现下拉,是父子层的结构,父层的第一个子元素,如果超出父容器,那么就可以实现下拉

问题:  今天在使用better-scroll实现下拉功能,遇到了一个问题 " 有时候不能下拉到底部,有时候能 "

解决过程1:

  出现这个问题,我想肯定是 refresh 方法调用的时机不正确,仔细看看代码,发现可能问题的存在原因:原来我的代码有个异步请求,2个请求都是有v-for循环,我只是在第二个异步请求调用完成,才调用 refresh 方法,所以如果第一个请求先完成,那么就没有问题,但是如果第二个请求先完成,那么dom渲染完就调用refresh 方法计算高度,之后第一个请求完成了,又重新操作dom,此时没有调用refresh,所以就有问题

解决过程2:

  后来改了代码,两个异步请求完成都调用refresh 方法重新计算高度,不过,过来一段时间,测试的同事,跑过来说那个问题还是存在,不过重现几率比之前少,作为有节操的开发人员,肯定不能说出现的机率少就不理,对吧?所以我又仔细看看我代码到底哪里又有什么问题,看了半小时,实在是想不到,更加让我狂抓的是我都不能重现问题。

  没有办法了,只得去找测试,问清楚具体重现步骤是什么,重现的机型是什么, 她说步骤没有什么特别,就按照流程来啊,机型是iphone5,于是我就借过来看看。最后试了10多分钟,终于重现了,重现的时候,看到了图片在加载中的loading ,我想我明白了问题的所在。

  原来,请求回来的数据,是有一些图片的连接地址的,由于图片加载,也是异步的,图片的宽度是图片撑开的,图片没有加载完成,宽度就是0,所以,如果图片加载完成后,2个异步请求也完成了,那就不会调用refresh 方法重新计算高度,所以就出现问题

最后解决方案:

给img标签绑定 load事件 , 加载完成,就调用refresh 方法重新计算高度

better-scroll 遇到的问题 1的更多相关文章

  1. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  2. MUI开发APP,scroll组件,运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  3. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  4. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

  5. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  6. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  7. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  8. 【前端性能】高性能滚动 scroll 及页面渲染优化--转发

    本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...

  9. 由overflow-x:scroll产生的收获

    我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...

  10. UGUI 之Scroll Rect 坑

    由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...

随机推荐

  1. Python列表删除的三种方法

    1.使用del语句删除元素 >>> i1 = ["a",'b','c','d'] >>> del i1[0] >>> prin ...

  2. Linux errno错误对照表

    errno 在 <errno.h> 中定义,错误 Exx 的宏定义在 /usr/include/asm-generic 文件夹下面的  errno-base.h 和 errno.h,分别定 ...

  3. linux中断和异常睡眠问题

    中断和异常: 中断只代表异步中断,异常代表同步中断,这样系统调用是异常处理,不是中断处理. 这里异常处理是可以休眠block的,因为异常处理所需的数据是存储在异常栈中,而每个进程都有一个异常栈,所以异 ...

  4. 用勤哲excel服务器开发旅行社管理软件

    做这个旅行社管理软件之前,旅行社给我的印象就是“拉客”与“接客”,业务模式应该比较简单.但做起这样一个旅行社管理软件,才发现麻雀虽小.五脏俱全,一个旅行社的运作,牵扯到的方方面面远远超出自己之前的理解 ...

  5. vue 学习一

    这个是很早之前公司要使用vue.js时候学习记在有道云笔记上的,发觉那个笔记贼多了,没办法,觉得是要换个地方存笔记了, 一vue.js的使用: 可以在页面是直接使用: <!DOCTYPE htm ...

  6. mybatis和返回

    1.查询int 数组 dao类: public List<Integer> queryRoleIdList(Integer userId); service类: List<Integ ...

  7. Python语言、编译解释、动态库静态库、编译过程、头文件

    学习Python这门语言首先要了解 什么是编译与解释,什么是连接,什么是动态库与静态库, 什么是编译: 编译就是先把高级语言设计的程序翻译成二进制的机器语言,然后CPU直接执行机器码就可以了.一把翻译 ...

  8. java的Spring学习1--spring引用及属性(setter,getter)注入

    1.目录结构 项目->src->main->java->com.test.ppmoney 设置java文件夹为代码  在Project Structure 里的 Modules ...

  9. 09-排序2 Insert or Merge (25 分)

    According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...

  10. lnmp 架构

    Mysql安装 tar zxf mysql-boost-5.7.17.tar.gz yum install -y gcc gcc-c++ yum install cmake-2.8.12.2-4.el ...