BetterScroll 使用

文档查看说明

如果只是使用最基础的功能，可在快速上手中查找对应的配置介绍指南 | BetterScroll 2.0
如果是需要使用进阶的功能，如监听滚动条滚动的位置等，需要在插件里面查找，快速上手内的信息不完整插件 | BetterScroll 2.0

固定的HTML格式

PS：如果发现没有生效，1、检查HTML格式是否正确；2、检查css是否有设置高度；3、检查js选择器名是否设置不正确。

<div class="scroll-wrapper"><div class="scroll-content"></div>
</div>
<!-- scroll-wrapper 限制需要做滚动内容的显示区域 -->
<!-- scroll-content 放需要做滚动的内容 -->

特殊说明-属性

pullUpLoad 属性

内容如果是动态插入的情况下，即使内容没有超出显示区域，滚动条仍然会显示，不会隐藏

特殊说明-事件

scroll

常规设置无法触发，需加上probeType才可以触发scroll的事件回调，有三个值，具体使用说明看：配置项 | BetterScroll 2.0

常用配置

observeDOM：true/false，开启/关闭监听滚动区域内内容是否动态插入

mouseWheel：true/false，开启/关闭鼠标滚轮查看内容功能

bounce：true/false，开启/关闭滚动条的缓动效果

preventDefault：true/false，开启/关闭阻止内容点击

scrollbar：true/false，开启/关闭滚动条样式具体配置说明

eventPassthrough：'vertical'/'horizontal'，保留原生方向的滚动具体说明

scrollX/scrollY：true/false，开启关闭横、竖向滚动

BetterScroll 使用相关推荐

better-scroll刷新后才能滑动的解决方案
better-scroll刷新后才能滑动的解决方案参考文章: (1)better-scroll刷新后才能滑动的解决方案 (2)https://www.cnblogs.com/mldonkey/p/1 ...
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例...
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析后台歌词接口返回的数据如下(base64字符串): W3R ...
better-scroll 的介绍
配置项中的 probeType 属性,是number,当值为 0 ,不会实时监听 scroll 事件,设置为 2 - 3 ,可以实时监听 scroll 事件 pullUpload 选项,设置为 fal ...
Vue使用better-scroll左右菜单联动
说明最近想做一个vue商城小项目,练习一下vue的语法,刚刚好碰到了需要左右菜单实现联动,因此就接触了 better-scroll. github地址中文文档. 代码页面结构以及数据 //页面结 ...
better-scroll：angularJs中用better-scroll封装一个滚动的指令
注:ionic自带的ion-scrll,在添加了一个长按复制的类样式后,会导致滚动白屏的问题.因为长按复制的类阻碍了ionic的滑动监听事件.所以选择用better-scroll来代替ionic的滚动 ...
六十九、完成Vue项目城市选择页，路由配置，搜索框布局、列表布局、BetterScroll 的使用和字母表布局
2020/10/28. 周三.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
better-scroll 上拉加载，下拉刷新(解决移动端长页面卡顿)
一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析: 后台歌词接口返回的数据如下(base64字符串): W3 ...
基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子
直接上源码: 组件:scroll.vue,需要先npm install better-scroll <template><div ref="wrapper"> ...
Vue开发中有着原声app效果的滚动的第三方插件better-scroll在github的上面的运用方法及地址
https://github.com/ustbhuangyi/better-scroll 以上是github地址 better-scroll 中文文档 What is better-scroll ...