BScroll使用
当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
话说前面:
要注意的是,better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。
1.下载 npm install better-scroll --save 2.使用: 需要先导入 import BScroll from ‘better-scroll‘
绿色部分为 wrapper,也就是父容器,它会有固定的高度。黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 better-scroll 的滚动原理。(官方的图有个错别字,wrapper)
// 1.创建BScroll对象 const bscroll = new BScroll(document.querySelector(‘.wrapper‘),{ probeType:3, //0,1,2,3 click:true, //是否允许点击,默认false pullUpLoad:true //上拉加载更多,默认为false,不允许 }) 默认情况下BScroll是不可以实时的监听滚动位置的 probe 侦测 0,1 都是不侦测 2:在手指滚动的过程中侦测,手指离开后的惯性滚动过程中不侦测 3:只要是滚动,都侦测 关于pullUpLoad的基本使用 bscroll.on(‘pullingUp‘,() => { console.log(‘上拉加载更多‘) // 发送网络请求,请求更多页的数据 // 等数据请求完成,并且将新的数据展示出来后 setTimeout(() => { bscroll.finishPullUp() },2000) })
实际应用时, 还是要封装
better-scroll 的初始化时机很重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,来决定是否可以纵向和横向滚动。因此,我们在初始化它的时候,必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候,必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。所以同学们反馈的 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对,或者是当 DOM 结构发送变化的时候并没有重新计算 better-scroll。
相关推荐
letheashura 2020-05-10
sixthelement 2020-04-30
songfens 2019-12-06
RexLeee 2019-11-10
大地飞鸿 2019-11-08
zZoOoOJaVa 2014-06-24
Martnn 2019-11-05
echoes 2019-11-03
sdbxpjzq 2019-10-25
dly 2015-05-29
xtuhcy 2017-09-25