备注: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. web安全-传输安全

    web安全-传输安全 anyproxy 代理服务器在之间可以看到 1.HTTP传输窃听 浏览器-代理服务器-链路-服务器 传输链路窃听篡改 2.HTTP窃听 >* 窃听用户密码 >* 窃听 ...

  2. angular知识点总结

    angularjs angular支持的运算 逻辑运算 比较运算 三目运算 调用字符串对象的成员方法 使用直接变量表示法创建对象 使用数组 (不可以)new var (不可以)调用全局es javas ...

  3. JAVA 正则表达式的三种模式: 贪婪, 勉强和占有的讨论

    假设待处理的字符串是  xfooxxxxxxfoo 模式.*foo (贪婪模式): 模式分为子模式p1(.*)和子模式p2(foo)两个部分. 其中p1中的量词匹配方式使用默认方式(贪婪型). 匹配开 ...

  4. v$sqlarea,v$sql,v$sqltext这三个视图提供的sql语句有什么区别?

    v$sqltext存储的是完整的SQL,SQL被分割 SQL> desc v$sqltextName                                      Null?    ...

  5. Common operators to overload-c++运算符重载的标准语法(全)

    Common operators to overload Most of the work in overloading operators is boiler-plate code. That is ...

  6. P2617 Dynamic Rankings 动态主席树

    \(\color{#0066ff}{ 题目描述 }\) 给定一个含有n个数的序列a[1],a[2],a[3]--a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i ...

  7. ArcGIS-各类问题

    arcgis 10.4破解方法*注意!Desktop,Engine,Server必须为同一版本 1.先安装License10.4 2.再安装Desktop10.4 3.再安装Engine10.4 4. ...

  8. poj3321(dfs序+树状数组)

    题目链接:https://vjudge.net/problem/POJ-3321 题意:给一个普通树(不是二叉树),并且已经编号,每个结点为1或0,有两种操作,对单个结点修改和查询一个结点的子树的所有 ...

  9. P3272 [SCOI2011]地板(插头DP)

    [题面链接] https://www.luogu.org/problemnew/show/P3272 [题目描述] 有一个矩阵,有些点必须放,有些点不能放,用一些L型的图形放满,求方案数 [题解] ( ...

  10. 线程池ThreadPoolExecutor分析: 线程池是什么时候创建线程的,队列中的任务是什么时候取出来的?

    带着几个问题进入源码分析: 1. 线程池是什么时候创建线程的? 2. 任务runnable task是先放到core到maxThread之间的线程,还是先放到队列? 3. 队列中的任务是什么时候取出来 ...