今天在使用vue动画 transition-group 和 better-scroll 的时候,出现了下拉列表不能滚动的问题。

  • 问题描述:

我写了一个scroll的基础组件,组件接受一个data参数,监听data数据发生变化,就延迟20毫秒,调用scroll 的refresh 方法,从新计算高度,在一般情况下,是没有问题的。 后面,客户说,当给列表添加,或者删除歌曲的时候,太过于生硬,想要些平滑的效果,所以我就使用了 transition-group 给列表的添加动画,结果就出现了添加歌曲的时候,下拉不到底部的情况

  • 问题出现的原因:

transition-group 动画,我给的时间是200毫秒, 由于动画200毫秒才执行完成,所以200毫秒后,dom才操作完成,不过scroll的基础组件监听到数据变化后20毫秒就执行refresh,此时,dom还没有完成渲染,所以计算错误

  • 解决方案:

scroll的基础组件里面的 refresh 方法之前是监听到数据变化后20毫秒就执行,将20毫秒改为 可以接受外部传递过来的 refreshDelay 变量,默认值是20,如果使用了transition-group 动画,那么给scroll 组件传递一个refreshDelay  参数,就可以改变refresh 延后执行的时间

better-scroll 遇到的问题 3 (transition-group 相关)的更多相关文章

  1. Linux与user和group相关文件分析

    /etc/passwd LOGNAME:PASSWORD::UID:GID:USERINFO:HOME:SHELL 注册名:口令:用户标识号:组标识号:用户名:用户主目录:命令解释程序 ()注册名(l ...

  2. 优酷电视剧爬虫代码实现一:下载解析视频网站页面(4)补充: Java正则表达式Matcher.group(int group)相关类解析

    在Java正则表达式的相关类Matcher中,有如下几个方法: - int groupCount() - String group(int group) - int start(int group)  ...

  3. Solr中的group与facet的区别

    Solr中的group与facet的区别 如果是简单的使用的话,那么Facet与group都可以用来进行数据的聚合查询,但是他们还是有很大的区别的. 首先上facet跟group的操作: Facet的 ...

  4. Solr --- Group查询与Facet区别

    简介 facet的查询结果主要是分组信息:有什么分组,每个分组包括多少记录:但是分组中有哪些数据是不可知道的,只有进一步搜索. group则类似于关系数据库的group by,可以用于一个或者几个字段 ...

  5. Solr中的group与facet的区别 [转]

    Solr中的group与facet的区别 facet 自己理解就是分组聚合用的, 如下说明 http://blog.csdn.net/a925907195/article/details/472572 ...

  6. 以kaldi中的yesno为例谈谈transition

    在基于GMM-HMM的传统语音识别里,比音素(phone)更小的单位是状态(state).一般每个音素由三个状态组成,特殊的是静音(SIL)由五个状态组成.这里所说的状态就是指HMM里的隐藏的状态,而 ...

  7. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

  8. Java - Test - TestNG: testng.xml 元素 group

    1. 概述 group 相关的元素 groups run 其他相关(不准备提了) package class include exclude 2. 背景 准备 了解了 class 及其子元素 问题 对 ...

  9. Angular material mat-icon 资源参考_Action

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  10. Angular material mat-icon 资源参考_Hardware

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

随机推荐

  1. 《图解HTTP》阅读笔记-第五章-web服务器

      第五章.与HTTP协助的web服务器单台虚拟主机实现多个域名可以用单台物理主机运行多台虚拟主机,这些虚拟主机的IP相同,而虚拟主机有可以寄存多个不同主机名和域名的web网站,所以要保证发送HTTP ...

  2. boost库checked_delete的使用

    在查看boost库时发现一个小文件checked_delete.hpp里面几个小函数,它的作用用很简短的话来说:防止未定义的行为造成delete时的内存泄露.实现如下: template<cla ...

  3. CF959C Mahmoud and Ehab and the wrong algorithm 构造

    Mahmoud was trying to solve the vertex cover problem on trees. The problem statement is: Given an un ...

  4. java:数据结构复习(三)链表队列

    @TOC 和栈一样,队列也是表,但是使用队列的特点是先进先出. 队列模型 队列的基本操作是入队,它是在表的末端插入一个元素,和出队,它是删除在表开头的一个元素 graph LR A[<kbd&g ...

  5. Java使用Array类创建多维数组

    1.创建一维数组 import java.lang.reflect.Array; public class ArrayTest { public static void main(String[] a ...

  6. day19 MRO C3算法 super()

    1. MRO(Method Resolution Order):方法解析顺序,主要用于在多继承时判断调的属性的路径(来自于哪个类). 1.Python语言包含了很多优秀的特性,其中多重继承就是其中之一 ...

  7. LeeCode(No3 - Longest Substring Without Repeating Characters)

    题目: Given a string, find the length of the longest substring without repeating characters. 示例: Given ...

  8. Photoshop入门教程(四):混合模式

    学习心得:混合模式在Photoshop常容易被忽视,最大原因就是它所处的位置比较隐蔽,在图层面板左上部的角落里.使用混合模式,决定图像中上图层像素如何与图像中的下层像素进行混合,使图层的叠加更加炫酷. ...

  9. 4.AOP

    1.代理模式 代理模式(Proxy Pattern)是GoF23种常用设计模式之一使用代理模式创建代理对象,让代理对象控制目标对象的访问,并且可以在不改变目标对象的情况下添加一些额外的功能包括静态代理 ...

  10. Unable to verify your data submission.加入了_csrf也报400错误的解决

    <input type="hidden" name="_csrf" value="<?=Yii::$app->request-> ...