饿了么慕课网学习手记(二)BetterScroll

简介

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slider等功能。
为了满足这些功能,better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。同时还支持很多API和事件,具体支持的事件可以查看官网讲的非常详细。
由于它基于原生JavaScript 实现,不依赖任何框架,所以既可以原生 JavaScript 引用,也可以与目前前端 MVVM 框架结合使用,比如,其官网上的示例就是与 Vue 的结合。

滚动原理

在浏览器中的滚动中,当内容的高度高于外边容器的高度的时候也就出现了滚动条,我们可以通过使用滚动条来看到超出的部分.better-scroll的原理正是基于这里,内容部分的宽度/高度必须大于外部宽度/高度。所以在使用的时候外部容器的需要设置固定宽度,还有一个问题需要设置overflow:hidden,这是因为为了隐藏超出部分
饿了么慕课网学习手记(二)BetterScroll_第1张图片

使用

引入

npm install better-scroll --save

初始化

let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

慕课网中的例子

效果图
饿了么慕课网学习手记(二)BetterScroll_第2张图片
目标样式

左右两栏均可滚动,切右侧滚动时能准确定位到左侧的menu

实现步骤

布局


第一步:运用BSCroll使左右两侧均可滚动


                    
                    

你可能感兴趣的:(前端手记,慕课网饿了么,BSCroll)