better-scroll 遇到的问题 1
备注: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的更多相关文章
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- MUI开发APP,scroll组件,运用到区域滚动
最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化--转发
本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...
- 由overflow-x:scroll产生的收获
我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...
- UGUI 之Scroll Rect 坑
由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...
随机推荐
- Python列表删除的三种方法
1.使用del语句删除元素 >>> i1 = ["a",'b','c','d'] >>> del i1[0] >>> prin ...
- Linux errno错误对照表
errno 在 <errno.h> 中定义,错误 Exx 的宏定义在 /usr/include/asm-generic 文件夹下面的 errno-base.h 和 errno.h,分别定 ...
- linux中断和异常睡眠问题
中断和异常: 中断只代表异步中断,异常代表同步中断,这样系统调用是异常处理,不是中断处理. 这里异常处理是可以休眠block的,因为异常处理所需的数据是存储在异常栈中,而每个进程都有一个异常栈,所以异 ...
- 用勤哲excel服务器开发旅行社管理软件
做这个旅行社管理软件之前,旅行社给我的印象就是“拉客”与“接客”,业务模式应该比较简单.但做起这样一个旅行社管理软件,才发现麻雀虽小.五脏俱全,一个旅行社的运作,牵扯到的方方面面远远超出自己之前的理解 ...
- vue 学习一
这个是很早之前公司要使用vue.js时候学习记在有道云笔记上的,发觉那个笔记贼多了,没办法,觉得是要换个地方存笔记了, 一vue.js的使用: 可以在页面是直接使用: <!DOCTYPE htm ...
- mybatis和返回
1.查询int 数组 dao类: public List<Integer> queryRoleIdList(Integer userId); service类: List<Integ ...
- Python语言、编译解释、动态库静态库、编译过程、头文件
学习Python这门语言首先要了解 什么是编译与解释,什么是连接,什么是动态库与静态库, 什么是编译: 编译就是先把高级语言设计的程序翻译成二进制的机器语言,然后CPU直接执行机器码就可以了.一把翻译 ...
- java的Spring学习1--spring引用及属性(setter,getter)注入
1.目录结构 项目->src->main->java->com.test.ppmoney 设置java文件夹为代码 在Project Structure 里的 Modules ...
- 09-排序2 Insert or Merge (25 分)
According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...
- 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 ...