[better-scroll](https://github.com/ustbhuangyi/better-scroll) [文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88) ## 1.安装 ~~~ npm i better-scroll --save ~~~ ## 2.html结构 better-scroll 最常见的应用场景是列表滚动，我们来看一下它的 html 结构 ~~~ <div class="wrapper" ref="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM，但不会影响滚动 --> </div> ~~~ ## 3.给wrapper关键css ~~~ .wrapper { width: 100%; height:1000px; overflow: hidden; position: relative; } ~~~ ## 4.在页面的`js`文件中配置 ~~~ import BScroll from "better-scroll"; export default { name: "CityList", mounted() { this.$nextTick(() => { this.scroll = new BScroll(this.$refs.wrapper, {}); }); } }; </script> ~~~