备注: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. [BZOJ1799][Ahoi2009]self 同类分布(数位dp)

    题目描述 给出两个数 a,ba,b ,求出 [a,b][a,b] 中各位数字之和能整除原数的数的个数. 输入输出格式 输入格式: 一行,两个整数 aa 和 bb 输出格式: 一个整数,表示答案 输入输 ...

  2. City Game UVALive - 3029(悬线法求最大子矩阵)

    题意:多组数据(国外题好像都这样),每次n*m矩形,F表示空地,R表示障碍 求最大子矩阵(悬线法模板) 把每个格子向上延伸的空格看做一条悬线 以le[i][j],re[i][j],up[i][j]分别 ...

  3. Leetcode 520. Detect Capital 发现大写词 (字符串)

    Leetcode 520. Detect Capital 发现大写词 (字符串) 题目描述 已知一个单词,你需要给出它是否为"大写词" 我们定义的"大写词"有下 ...

  4. 黑马JavaScript学习一 BOM之Window对象定时器功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. zookeeper分布式锁简单实现(JavaApi)

    1.创建会话连接 package com.karat.cn.zookeeperAchieveLock.javaapilock; import org.apache.zookeeper.WatchedE ...

  6. vscode 注册表

    Windows Registry Editor Version 5.00 ; Open files [HKEY_CLASSES_ROOT\*\shell\Open with VS Code] @=&q ...

  7. spring boot中 启用aspectj

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  8. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_元数据

    1.元数据简介 全称:metadata 属性:数据表集合 产地:面向 CLR 的编译器在托管模块中生成 2.元数据内部结构及与托管模块的关系 [概述] 托管模块中包含着元数据,元数据是由一组数据表组成 ...

  9. 1005 继续(3n+1)猜想(25 分)

    卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n=3 进行验证的时 ...

  10. POJ 3734 Blocks(矩阵快速幂+矩阵递推式)

    题意:个n个方块涂色, 只能涂红黄蓝绿四种颜色,求最终红色和绿色都为偶数的方案数. 该题我们可以想到一个递推式 .   设a[i]表示到第i个方块为止红绿是偶数的方案数, b[i]为红绿恰有一个是偶数 ...