options.probeType = 3 this.scroll = new BScroll(this.$refs.wrapper, options) this.scroll.on('scroll', (pos) => { const y = pos.y for (let i = 0; i < listHeight.length - 1; i++) { let height1 = listHeight[i] let height2 = listHeight[i + 1] if (-y >= height1 && -y < height2) { this.currentIndex = i } } })
当点击索引时，使用 scrollToElement()方法 滚动到该索引区域。
scrollTo(index) { this.$refs.indexList.scrollToElement(this.$refs.listGroup[index], 0) }
具体效果可见索引列表 - 示例。
开屏引导
开屏引导，其实就是一种不自动循环播放的横向滚动轮播图而已。
options = { scrollX: true, snap: { loop: false } } this.slide = BScroll(this.$refs.slide, options)
具体效果可见开屏引导 - 示例。因为此需求场景一般只有移动端才有，所以最好在手机模式下看效果。
自由滚动
freeScroll 选项，用于开启自由滚动，允许横向和纵向同时滚动，而不限制在某个方向。
options.freeScroll = true
另外需要注意的是，此选项在eventPassthrough 设置了保持原生滚动时无效。
具体效果可见自由滚动-示例。
小结
BetterScroll 可以用于几乎所有滚动场景，本文仅介绍了在一些典型场景下的使用姿势。
作为一款旨在解决移动端滚动需求的插件，BetterScroll 开放的众多选项、方法和事件，其实，就是提供了一种让我们更加快捷、灵活、精准时机地处理滚动的能力。
以上所述是小编给大家介绍的BetterScroll 在移动端滚动场景的应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！