用better-scroll库,可以让滚动的效果更理想,更接近原生APP
- 安装 npm install better-scroll --save
- 页面引入 import Bscroll from 'better-scroll'
-
创建实例
- 要求的DOM结构
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
<!-- 这里可以放一些其它的 DOM,但不会影响滚动 -->
</div>
上面的代码中 BetterScroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。这里要注意的是,BetterScroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。