关于better-scroll的使用注意事项
better-scroll的原理
1.什么是 better-scroll?
better-scroll 是一个移动端滚动的解决方案,它不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。
2.better-scroll的滚动原理?
先来看一下浏览器的滚动原理,浏览器的滚动条大家都会遇到,当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。那么对于 better-scroll 也是一样的道理,我们先来看一下 better-scroll 常见的 html 结构:
为了更加直观,我们再来看一张图:
绿色部分为 wrapper,也就是父容器,它会有固定的高度。黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 better-scroll 的滚动原理。
那么,我们怎么初始化 better-scroll 呢,如果是上述 html 结构,那么初始化代码如下:
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper, {})
better-scroll 对外暴露了一个 BScroll 的类,我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象,第二个是一些配置参数,具体参考 better-scroll 的文档。
better-scroll 的初始化时机很重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,来决定是否可以纵向和横向滚动。因此,我们在初始化它的时候,必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候,必须重新调用 scroll.refresh()
方法重新计算来确保滚动效果的正常。所以同学们反馈的 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对,或者是当 DOM 结构发送变化的时候并没有重新计算 better-scroll。
如何在 Vue 中使用 better-scroll
Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs
。在这里,我们通过了 this.$refs.wrapper
访问到了这个 DOM 对象,并且我们在 mounted 这个钩子函数里,this.$nextTick
的回调函数中初始化 better-scroll 。因为这个时候,wrapper 的 DOM 已经渲染了,我们可以正确计算它以及它内层 content 的高度,以确保滚动正常。
异步数据的处理
在我们的实际工作中,列表的数据往往都是异步获取的,因此我们初始化 better-scroll 的时机需要在数据获取后,代码如下:
---------------------------------------------------------------------------------------------------
之前在做去哪儿网项目中better-scroll失效的原因过程如下:
可以很清晰的看到,上述代码中并没有父级盒子,于是我加了个父级盒子,也给父级盒子给了一个固定的高度,然后就能正常滚动起来了,具体的实现过程如下:
关于better-scroll的使用注意事项的更多相关文章
- 14.1 Scroll说明和注意事项
使用scroll滚动搜索: 比如全文搜索10万条数据,不能一次全搜出来返回,太耗时了.通常是一批一批的获取结果,滚动搜索 1. 第一次搜索时,会生成这批数据的快照,下次再搜的时候,基于此快照进 ...
- HTML 调用iscroll.js主要事项
iscroll是一款很不错的滚动控件(js),但是在调用的时候,需要注意一些事项: 1.iscroll支持水平和垂直滚动,那么在调用的时候,一定注意滚动div必须大于父div,也就是说,父div的宽度 ...
- Unity NGUI制作scroll view
unity版本:4.5 NGUI版本:3.6.5 参考链接:http://blog.csdn.net/monzart7an/article/details/23878505,作者:CSDN 冬菊子 ...
- Android群英传笔记——第五章:Android Scroll分析
Android群英传笔记--第五章:Android Scroll分析 滑动事件算是Android比较常用的效果了,而且滑动事件他本身也是有许多的知识点,今天,我们就一起来耍耍Scroll吧 一.滑动效 ...
- Elastic数据迁移方法及注意事项
需求 ES集群Cluster_A里的数据(某个索引或某几个索引),需要迁移到另外一个ES集群Cluster_B中. 环境 Linux:Centos7 / Centos6.5/ Centos6.4Ela ...
- iScroll框架解析——Android 设备页面内 div(容器,非页面)overflow:scroll; 失效解决(转)
移动平台的活,兼容问题超多,今儿又遇到一个.客户要求在弹出层容器内显示内容,但内容条数过多,容器显示滚动条.按说是So easy,容器设死宽.高,CSS加属性 overflow:scroll; -we ...
- 个人待办事项工具的设计和搭建(IFE前端2015春季 任务3)
这是我几个月之前的项目作品,花了相当的时间去完善.博客人气不高,但拿代码的人不少,所以一直处于保密状态.没有公开代码.但如果对你有帮助,并能提出指导意见的,我将十分感谢. IFE前端2015春季 任务 ...
- CSS命名规范参考及书写注意事项
CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ ...
- JS——scroll动画
固定导航栏 1.计算导航栏到顶部的距离值 2.当scrollTop值大于这个距离值就添加定位,当小于距离值后解除定位 注意事项:当导航栏添加定位之后,导航栏就脱离了文档流,也就是不占位了,下面的盒子就 ...
- Qt3升至Qt4需要注意的几件事项浅谈
Qt3升至Qt4需要注意的几件事项浅谈 公司以前的项目是用Qt3写的,随着时间的推移慢慢显示出Qt3有多方面的限制,因此先公司决定用Qt4来改写这个项目,并为软件添加新功能,在此背景先编写此文章. 先 ...
随机推荐
- 自学FPGA笔记之 “有限状态机”
“有限状态机”,一份好的代码必需掌握的技能. 首先状态机需要分清楚一共有多少种状态,其次画出状态图,状态图根据需求来画,尽可能的细分画到每一个状态,如有需要用到状态机一定要画出状态图,一定要画出状态图 ...
- 【JZOJ4910】【NOIP2017模拟12.3】子串
题目描述 数据范围 =w= 暴力: 从前往后枚举一个i,再从前往后枚举一个j: 如果s[i]不是s[j]的子串,更新答案,继续枚举: 如果s[i]是s[j]的子串,停止枚举. 因为对于s[k] (k& ...
- 【JZOJ4742】【NOIP2016提高A组模拟9.2】单峰
题目描述 输入 输出 样例输入 2 样例输出 2 数据范围 解法 答案为2^(n-1),快速幂即可. 证明:显然峰值必定为n,那么对于其他n-1个数,要么放在峰值的左边,要么放在峰值的右边,所以方案数 ...
- Directx11教程(51) 简单的billboard
原文:Directx11教程(51) 简单的billboard billboard称作公告板,通常用一个quad(四边形)表示[有的billboard用两个正交的quad表示],它的特点 ...
- sql标签和include标签的使用
<sql>用来封装SQL语句, <include>用来调用<sql>封装的语句 代码片段: <sql id="select"> SE ...
- material-ui里面的withStyles是什么?
export default withStyles(styles, { name: 'MuiAppBar' })(AppBar); //这里的作用是什么? withStyles 是一个 HOC 组件, ...
- 微信小程序开发资源整理
有兴趣学习微信小程序开发的可以关注简书专题 微信小程序开发 由于微信已经开发文档和开发工具了,所以下面的内容用处不大了. 具体参考:http://mp.weixin.qq.com/wiki/ 这篇文章 ...
- JavaScript —— 常用数据类型隐式转换
公用方法: let checkType = (data) => { if(data){ console.log(true); }else{ console.log(false); } } 一.字 ...
- xib搭建scrollView无法滑动的问题
最近给xib中的scrollView添加contentView的时候,view的约束总是参照莫名其妙的东西,不是frameLayout就是safeArea 因为之前都是默认以superView为参照系 ...
- @codeforces - 444A@ DZY Loves Physics
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 点 m 边的图,边有边权,点有点权. 找到一个连通 ...