在手机端上使用js原生的滚动效果时会有非常卡顿的现象，此时我们可以使用第三方库 better-scroll 来解决该问题。
<div class="wrapper"> <ul class="content"> <li>...</li> </ul> </div>首先你的html结构需要长这样，用一个大的wrapper套一个唯一个标签，标签中是你希望滚动的内容，当然wrapper与content的名字不是非它不可，你可以自己设定。
const bscroll = new BScroll(document.querySelector('.wrapper')) .warpper{ height:300px; overflow:hidden; }最基本的使用就是上面这些，BScroll需要两个参数，一个 el 参数，代表根标签，一个 options 参数，代表配置信息，但如果没有其它要求，可省略 options。 给warpper设定一个具体的高度以实现局部滚动，可以看到滚动内容在wrapper中滚动，同时附带有弹簧效果。
监听滚动到什么位置: 默认情况下BScroll是不能时时监听滚动位置的，想要让它监听，需要配置options参数。
const bscroll = new BScroll('.wrapper',{ probeType:0 }) bscroll.on('scroll',function (position) { console.log(position); })probeType参数的不同取值对于监听有不同的效果，默认情况下是0，此时不监听滚动，值为1时，只监听用户长按屏幕时的位置，值为2时，监听用户长按以及点按时的位置，但不监听屏幕的惯性滚动，值为3时，处处监听。 bscroll通过 .on 方式为不同的事件类型设置监听函数，它有两个参数，一个是 eventType ，表示监听的事件类型，一个是监听函数，当事件类型为scroll时，监听函数默认带有position参数，即位置参数。
上拉触发函数：
const bscroll = new BScroll('.wrapper',{ probeType:0, pullUpLoad:true }) bscroll.on('pullingUp',() => { //... //上拉函数默认只执行一次，只用finishPullUP()之后才能再次执行 bscroll.finishPullUP() })better-scroll更多配置及示例：
国内版文档： https://better-scroll.gitee.io/docs/zh-CN/ 国内版示例： https://better-scroll.gitee.io/examples
v1版本 ：https://better-scroll.gitee.io/docs-v1/doc/zh-hans/
在vue中使用，封装：
<template> <div ref="wrapper"> <div class="content"> <slot></slot> </div> </div> </template> <script> import BScroll from 'better-scroll'; export default { name: "Scroll", data(){ return{ scroll:null } }, mounted() { this.scroll = new BScroll(this.$refs.wrapper,{ //probeType:3, //pullingUpLoad:true }) } } </script>注意通过 ref 获取元素避免多个wrapper重复的情况。
