better-scroll 遇到的问题 3 (transition-group 相关)
今天在使用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 相关)的更多相关文章
- Linux与user和group相关文件分析
/etc/passwd LOGNAME:PASSWORD::UID:GID:USERINFO:HOME:SHELL 注册名:口令:用户标识号:组标识号:用户名:用户主目录:命令解释程序 ()注册名(l ...
- 优酷电视剧爬虫代码实现一:下载解析视频网站页面(4)补充: Java正则表达式Matcher.group(int group)相关类解析
在Java正则表达式的相关类Matcher中,有如下几个方法: - int groupCount() - String group(int group) - int start(int group) ...
- Solr中的group与facet的区别
Solr中的group与facet的区别 如果是简单的使用的话,那么Facet与group都可以用来进行数据的聚合查询,但是他们还是有很大的区别的. 首先上facet跟group的操作: Facet的 ...
- Solr --- Group查询与Facet区别
简介 facet的查询结果主要是分组信息:有什么分组,每个分组包括多少记录:但是分组中有哪些数据是不可知道的,只有进一步搜索. group则类似于关系数据库的group by,可以用于一个或者几个字段 ...
- Solr中的group与facet的区别 [转]
Solr中的group与facet的区别 facet 自己理解就是分组聚合用的, 如下说明 http://blog.csdn.net/a925907195/article/details/472572 ...
- 以kaldi中的yesno为例谈谈transition
在基于GMM-HMM的传统语音识别里,比音素(phone)更小的单位是状态(state).一般每个音素由三个状态组成,特殊的是静音(SIL)由五个状态组成.这里所说的状态就是指HMM里的隐藏的状态,而 ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- Java - Test - TestNG: testng.xml 元素 group
1. 概述 group 相关的元素 groups run 其他相关(不准备提了) package class include exclude 2. 背景 准备 了解了 class 及其子元素 问题 对 ...
- Angular material mat-icon 资源参考_Action
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- Angular material mat-icon 资源参考_Hardware
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
随机推荐
- 洛谷P2518 [HAOI2010]计数
题目描述 你有一组非零数字(不一定唯一),你可以在其中插入任意个0,这样就可以产生无限个数.比如说给定{1,2},那么可以生成数字12,21,102,120,201,210,1002,1020,等等. ...
- UVA11270 Tiling Dominoes
\(\color{#0066ff}{ 题目描述 }\) 给定一个m×n的矩形网格,用1×2多米诺骨牌完全平铺. 请注意,即使一个平铺的旋转与另一个平铺相匹配,它们仍算作不同的平铺. 下面显示了一个平铺 ...
- P2253 好一个一中腰鼓!
题意:给你一个序列,初始是0,每次一个操作,把一个数^=1 每次求出最长01串的长度 正解:线段树(虽然暴力能过) 对于每个区间,记录三个值 lmax,以l为首的01串长度 rmax,以r为尾的01串 ...
- join与os.path.join
Python中有join和os.path.join()两个函数,具体作用如下: join:连接字符串数组.将字符串.元组.列表中的元素以指定的字符(分隔符)连接生成一个新的字符串os.path.joi ...
- Mybatis学习笔记(三) —— DAO开发方法
一.SqlSession的使用范围 SqlSession中封装了对数据库的操作,如:查询.插入.更新.删除等. SqlSession通过SqlSessionFactory创建. SqlSessionF ...
- 神奇的操作--O(1)快速乘
从同机房大佬那里听来的... 用O(1)时间求出两个相乘超过long long的数的取摸的结果 神奇的操作... inline long long multi(long long x,long lon ...
- 主席树的各类模板(区间第k大数【动,静】,区间不同数的个数,区间<=k的个数)
取板粗 好东西来的 1.(HDOJ2665)http://acm.hdu.edu.cn/showproblem.php?pid=2665 (POJ2104)http://poj.org/probl ...
- day_08 文件操作
常用模式解释 open表示打开一个文件 f 变量, 操控XXX.txt文件的句柄 r:只读 w:只写 a:追加写入 b:byte,这种模式下,encoding不能用utf-8字符集 1. 文件的基本操 ...
- HIVE 计算指定日期本周的第一天和最后一天
-- 计算指定日期本周的第一天和最后一天 select day ,dayofweek(day) as dw1 ,date_add( - dayofweek(day)) as Su_s -- 周日_st ...
- python中的设计模式
单例模式:Python 的单例模式最好不要借助类(在 Java 中借助类是因为 Java 所有代码都要写在类中),而是通过一个模块来实现.一个模块的模块内全局变量.模块内全局函数,组合起来就是一个单例 ...