备注: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. 小程序获取unionId以及手机号

    1.前端小程序传入后端接口的入参如下: code :临时登录凭证(必传)encryptedData:密文iv:偏移量 2.接收到入参后的java后端接口中的代码如下: @Action(value = ...

  2. java编程技巧和心得

    1.在一个类中修改或调用另一个类的变量: 只需要将该变量用public static 这个修饰符修饰,再用类名直接调用即可 2.实现对只有下标不同变量的操作 解决思路:可以将这些变量放在一个数组里,在 ...

  3. Gym - 101615 D Rainbow Roads dfs序

    题目传送门 题目大意: 给出一颗树,每条边都有一个颜色,对一个点来说,如果其他所有点到这个点的简单路径,相连的边颜色都不同,这个点即合法点,统计所有的合法点. 思路: 对于一个节点来说 1.如果这个节 ...

  4. Flask&&人工智能AI -- 6 人工智能初识,百度AI,图灵机器人

    一.人工智能初识,百度AI的创建与应用 参考连接:https://www.cnblogs.com/xiao987334176/p/9620113.html 1. 百度ai开放平台 2. AipSpee ...

  5. 爬虫初识和request使用

    一.什么是爬虫 爬虫的概念: 通过编写程序,模拟浏览器上网,让其去互联网上爬取数据的过程. 爬虫的工作流程: 模拟浏览器发送请求->下载网页代码->只提取有用的数据->存放于数据库或 ...

  6. linux中文件压缩与打包

    一.常见的压缩命令 在linux环境中,压缩文件的扩展名大多是*.tar,*.tar.gz,*.tgz,*.gz,*.Z,*.bz2,首先我们来介绍以下这些压缩文案的扩展名:. *.Z:compres ...

  7. thinkPHP Model的操作

    1.建立一个表 create table Demo( -> id int, ), -> age int, ) -> ); 2.新增数据 2.1面向过程的风格 $d = $a-> ...

  8. 12-----BBS论坛

    BBS论坛(十二) 12.1.图形验证码生成 (1)utils/captcha/init.py import random import string # Image:一个画布 # ImageDraw ...

  9. java——平衡二叉树 AVLTree、AVLMap、AVLSet

    平衡二叉树:对于任意一个节点,左子树和右子树的高度差不能超过1 package Date_pacage; import java.util.ArrayList; public class AVLTre ...

  10. Django相关的MTV